CSS技巧：word-wrap與word-break的區別

內容摘要：本文列舉了相容 IE 和 FF 的換行 CSS 推薦樣式，詳細介紹了word-wrap同word-break的區別。

相容 IE 和 FF 的換行 CSS 推薦樣式

最好的方式是

word-wrap:break-word; overflow:hidden;

而不是

word-wrap:break-word; word-break:break-all;

也不是

word-wrap:break-word; overflow:auto;

在 IE 下沒有任何問題，在 FF 下，長串英文會被遮住超出的內容。

word-wrap同word-break的區別

word-wrap:

normal　 Default. Content exceeds the boundaries of its container.

break-word Content wraps to next line, and a word-break occurs when necessary. 必要時會觸發word-break。

word-break:

normal　 Default. Allows line breaking within words. 好像是只對Asian text起作用。

break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.

keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

總結如下：

word-wrap是控制換行的。

使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。

break-word是控制是否斷詞的。

normal是預設情況，英文單詞不被拆開。

break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。

keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）