CSS3 分词 Firefox 和 Chrome 输出不同

Question

我正在尝试使用word-break 来打断一个长字符超过其父级宽度的单词。

在这个例子中，我有一个<div>，里面有width:43px和单词“play”。在 chrome 中，这个词很合适，但在 Firefox 中，got 被分成两行。

Chrome 屏幕截图

火狐截图

http://jsfiddle.net/chenx/7rYAm/

这里是 jsfiddle，你可以尝试在 Firefox 和 Chrome 中打开它，看看有什么不同。 我想要的是，它们都输出相同的结果。我更喜欢 Chrome 作为正确的结果。

这可能会影响我的应用，因为它们会将视图截屏到画布上，我不希望客户抱怨浏览器之间的输出差异。这里的最佳做法是什么？ word-break 可以跨浏览器标准化吗？

谢谢！

Answer 1

分词是标准化的。没有标准化的是“玩”这个词会有多宽。这取决于使用的字体、使用的确切字体光栅化算法、抗锯齿设置等等。

在 Windows 上，Firefox 和 Chrome 使用两种不同的操作系统提供的字体子系统（GDI 和 DirectWrite），它们具有不同的光栅化和抗锯齿行为，从而导致不同的文本宽度。

在这种情况下，最佳做法是不要为父级使用过小的宽度，并且可能会测试当视力不佳的用户强制使用比您要求的更大的字体时会发生什么。

Answer 2

这就是我不喜欢浏览器自己做事的地方。 Firefox 使用word-break: keep-all。另一方面，Chrome 使用word-break: break-word。