css - Chrome + Lucida Grande +自动换行

我的样式组合很奇怪，仅导致Chrome出现问题。我整理了一个小提琴来展示这个问题：http://jsfiddle.net/C3CbF/1/

当然，仅当您安装了Lucida Grande字体时，这才起作用-否则它们将看起来相同。但是，如果您拥有Lucida Grande，您会注意到，第一个表中“测试”中的最后一个“ t”仅在Chrome中（并且可能仅在Mac上-我尚未测试过PC）分解为第二个行，而第二张表就好了。

因此，我的问题是，在不删除任何样式（例如自动换行或字体）的情况下，有没有办法使这种样式不中断（或适当中断）？

还要注意，white-space: nowrap在这种情况下不起作用，因为如果长度超过300像素（例如在URL的情况下），我希望一个单词可以打断。

最佳答案

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

.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/

关于css - Chrome + Lucida Grande +自动换行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13161024/