Chrome + Lucida Grande + 自动换行答案

【问题标题】：Chrome + Lucida Grande + Word-wrapChrome + Lucida Grande + 自动换行
【发布时间】：2012-10-31 15:08:45
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css google-chrome

【解决方案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/

【讨论】：