2

我试图用word-break超过其父宽度的长字符来打破一个单词。

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

在此处输入图像描述

铬截图

在此处输入图像描述

火狐截图

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

这是 jsfiddle,您可以尝试在 Firefox 和 Chrome 中打开它以查看差异。我想要的是,它们都输出相同的结果。我更喜欢 Chrome 作为正确的结果。

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

谢谢!

4

2 回答 2

0

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

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

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

于 2014-03-29T06:53:51.583 回答
0

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

于 2015-06-09T23:47:20.690 回答