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-break 示意圖

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 所示。

word-wrap 示意圖

也許 W3C 也以爲 word-break 和 word-wrap 這兩個屬性名字實在是太類似了吧，因此在 CSS3 規範裏把 word-wrap 用 overflow-wrap 重命名了，不過目前瀏覽器支持不是很好，因此仍是乖乖地使用 word-wrap 吧。

word-break 和 word-wrap 的區別

終於來到本文的重點了！一開始看到 word-break: break-all 和 word-wrap: word-break 就頭大，這也太相像了，一共就四個單詞，結果還有三個單詞都是同樣的，效果看上去也好像沒什麼區別，也難怪 W3C 要給 word-wrap 換個名字了。那說回正題，區別在哪裏呢？？

對比示意圖

俗話說的好，一圖勝千言。在上圖中，咱們能夠清楚地看到，word-break: break-all 值如其名，斷開一切，利用上每一塊能夠利用的空間來塞下文本，避免鋪張浪費；而 word-wrap: word-break 則收斂許多，假如一行文字有能夠換行的點，如標點、CJK 文本等，那麼就不會在英文單詞或者字符中插入斷行了，不過從顯示效果來講的話則容易一起密集、一起空白，很不美觀。

white-space 大佬

前面說了這麼多 word-break 和 word-wrap 的值的做用，顯得它們很厲害的樣子。不過實際上它們受 white-space 大佬管轄，它的默認值爲 normal 時能夠容許 word-break 和 word-wrap 發揮做用，不過當它的值設爲 nowrap 時，就會不容許換行，致使全部的文本都擠在一行之中，以下圖所示。

white-space 示意圖

參考連接

1. 張鑫旭 - word-break:break-all和word-wrap:break-word的區別
2. MDN- word-break
3. MDN - overflow-wrap

博客原文連接