css - Chrome + Lucida Grande + 自动换行

Question

我有一个奇怪的样式组合，导致仅在 Chrome 中出现问题。我整理了一个 fiddle 来展示问题:http://jsfiddle.net/C3CbF/1/

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

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

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

Answer 1

我没有 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/