word-break 和 word-wrap 的區別

本文主要要介紹的是 CSS 中 word-break: break-all 和 word-wrap: break-word 的區別，雖然這兩個屬性都有使用過，但都是屬於使用時查一查文件隨手就用，用完了也不會深入去探究的範疇，希望藉著這篇文章來深入的探究一下這兩者的區別。

有一句話是“沒圖說個 xx”，我覺得這句話在探究 CSS 時特別正確。先讓我們來看一張圖：

上面的圖是同一段 HTML 程式碼由不同的 CSS 控制產生的效果，大家能猜到具體是哪些 CSS 值嗎？答案在 jsfiddle.net/elvinn/88p8… 中，可以去看看猜的對不對 ^_^ 如果猜對了的話，那麼可以殘忍地關閉這篇文章了；不過假如沒有猜對的話，那麼不妨和我一起來探究一番吧。

word-break

word-break 在 MDN 上的官方解釋是 specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box，翻譯一下就是它決定了當文字要溢位容器時，瀏覽器是否應該插入換行符避免溢位，它有下列值：

word-break: normal;
word-break: break-all;
word-break: keep-all;

/* 全域性屬性 */
word-break: inherit;
word-break: initial;
word-break: unset;複製程式碼

我們只需要關注前三個值：normal、break-all、和 keep-all，具體介紹如下：

normal：CJK(即 Chinese/Japanese/Koean，中日韓) 文字插入斷行，其它文字不插入斷行，如下圖中 1 所示；
break-all：所有文字都會插入斷行，如下圖中 2 所示；
keep-all：所有文字都不會插入斷行，如下圖中 3 所示（該值在移動端低版本瀏覽器上不支援）。

word-wrap

word-wrap 在 MDN 上的官方解釋是 specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box，把這個和 word-break 的解釋對比，可以發現基本一模一樣，只是多了 within words 兩個單詞進行了限制，也就是說它只能控制是否在單詞內加入斷行，它有下列值：

word-wrap: normal;
word-wrap: break-word;

/* 全域性屬性 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;複製程式碼

我們只需要關注前兩個值：normal、break-word，具體介紹如下：

normal：不會在非 CJK 單詞中插入斷行，如下圖中 1 所示；
break-word: 會在單詞中插入斷行避免溢位，如下圖中 2 所示。

也許 W3C 也覺得 word-break 和 word-wrap 這兩個屬性名字實在是太相似了吧，所以在 CSS3 規範裡把 word-wrap 用 overflow-wrap 重新命名了，不過目前瀏覽器支援不是很好，所以還是乖乖地使用 word-wrap 吧。