CSS3 word-break Firefox和Chrome輸出有所不同

Question

我試圖用word-break來打破長字符超出其父寬度的單詞。

在這個例子中，我有一個<div>與width:43px和單詞「玩」在其中。在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。