CSS3 word-break Firefox和Chrome输出不同

Question

我正在尝试使用word-break来破坏超过其父级宽度的长字符。

在此示例中，我有一个<div> width:43px，其中包含“play”字样。在chrome中，单词适合，但在Firefox中，单词got分为两行。

Chrome屏幕截图

Firefox屏幕截图

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。