html - CSS3 分词 Firefox 和 Chrome 输出不同

Question

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

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

Chrome 截图

火狐截图

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

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

这可能会影响我的应用程序，因为它们会将 View 截屏到 Canvas 上，而且我不希望客户提示浏览器之间的输出差异。这里的最佳做法是什么？可以word-break跨浏览器标准化？

谢谢!

Answer 1

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

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

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