我有一个奇怪的样式组合,导致仅在 Chrome 中出现问题。我整理了一个 fiddle 来展示问题: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;
}
关于css - Chrome + Lucida Grande + 自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13161024/