3

我有一种奇怪的样式组合，它们只会在 Chrome 中导致问题。我整理了一个小提琴来展示这个问题：http: //jsfiddle.net/C3CbF/1/

当然，这只有在您安装了 Lucida Grande 字体的情况下才有效 - 否则它们看起来会一样。但是，如果您有 Lucida Grande，您会注意到第一个表中“测试”中的最后一个“t”，仅在 Chrome 中（并且可能仅在 Mac 上 - 我还没有测试过 PC），分解为第二个行，而第二张桌子很好。

所以，我的问题是，在不删除任何样式（如自动换行或字体）的情况下，有没有办法让它不中断（或适当中断）？

另请注意，white-space: nowrap这在这种情况下不起作用，因为如果单个单词的长度超过 300 像素（例如 URL 的情况），我希望将其中断。

4

1 回答 1

1

我没有 Lucida Grande 字体，但我知道 [no] 环绕文本的最佳跨浏览器解决方案。看一下这个：

.nowrap {
    -webkit-white-space: nowrap;
    -khtml-white-space: nowrap;
    -moz-white-space: nowrap;
    -ms-white-space: nowrap;
    -o-white-space: nowrap;
    white-space: nowrap;

    word-wrap: normal;

    -webkit-word-break: keep-all;
    -khtml-word-break: keep-all;
    -moz-word-break: keep-all;
    -ms-word-break: keep-all;
    -o-word-break: keep-all;
    word-break: keep-all;
}

查看更多：http: //jsfiddle.net/iegik/ymSse/

于 2012-11-02T18:24:46.403 回答