關於 word-break 與 word-wrap 須要瞭解的知識

CSS 中有一對容易讓人混淆的規則，word-break 與 word-wrap。咱們經常用它們進行換行的控制，不過我基本是處於用完就忘的狀態，此次趁着機會總結一下關於它們的知識。

word-break

在介紹它以前，咱們先理解一個名詞，soft wrap opportunity。soft wrap opportunity 指的是可以換行的斷點位置，例如在大多數的書寫系統裏，空格和標點符號就是 soft wrap opportunity，排版時會在這些位置進行換行。

CSS 中的 word-break 就是用來定義 soft wrap opportunities。它支持如下幾個值：

值	說明
normal	默認換行規則，只有在 soft wrap opportunity 可以換行
break-all	爲了防止溢出，單詞能夠在任意爲止被拆分來知足換行（中文、日文、韓文除外）。
keep-all	CJK（中文、日文、韓文）中的「單詞」不會被拆分，非 CJK 會使用 normal 的規則。
break-word	與設置了 word-break: normal 和 overflow-wrap: anywhere 具備一樣的表現。

break-all 與 keep-all 的區別在於 CJK 中的「單詞」是否會被拆分，可我尋思着長這麼大也沒見過中文裏有單詞這東西呀。事實上，這個單詞其實就是標點符號或空格前的部分。具體表現以下：

word-break: normal 可被拆分，因此「號，」被換到了下一行。

word-break: keep-all 不可被拆分，因此「我後面有符號，」這個單詞都沒被換行。能夠理解爲一個很長的英文單詞在 normal 的值下也不會被分割換行。

word-wrap（overflow-wrap)

word-wrap 用來解決不可分割文字溢出的狀況，被重命名爲 overflow-wrap(單看 word-wrap，實在是難以想到它是用來解決溢出)。overflow-wrap 的兼容性並不如 word-wrap，不過差異不大，具體參見 caniuse。它支持如下幾個值：

值	說明
normal	在正常的換行點換行，例如兩個單詞中的空格。
anywhere	爲防止溢出，表示若是行內沒有多餘的地方容納該單詞，則那些正常的不能被分割的單詞會被強制分割換行（如長字或URL）。可是在計算最小內容內在尺寸（min-content intrinsic sizes）時會考慮 anywhere 所產生的 soft wrap opportunities。
break-word	同 anywhere，可是在計算最小內容內在尺寸（min-content intrinsic sizes）時不會考慮 break-word 所產生的 soft wrap opportunities。

normal 還能理解，anywhere 與 break-word 的那一大串說明究竟是在說啥？看不明白就測試一下表現，然而 anywhere 在 chrome 中居然是一個非法值，因而只能去找備胎 firefox。

anywhere 與 break-word

啥是最小內容內在尺寸（ min-content intrinsic sizes）？從 W3C 又是一串說明，簡單來講，min-content intrinsic sizes 就是不會致使文本溢出而且儘可能換行的最小寬度。那麼計算最小內容內在尺寸和 soft wrap opportunities 又有什麼關係呢。計算最小內容內在尺寸要求儘可能換行，而 soft wrap opportunities 又決定着哪些地方能換行。

當咱們給文本容器設置 width: min-content 時，咱們才能看出 anywhere 與 break-word 的區別。

overflow-wrap: anywhere 會影響計算最小內容內在尺寸的計算，因此容器的寬度會足夠小。

overflow-wrap: break-word 不會對容器寬度產生影響。

總結

通過上文的介紹，word-break 與 word-wrap 除了都有 word 好像就沒啥容易淆的了。

從用途上來講：

• word-break 是用來定義 soft wrap opportunities，即哪些地方是可以換行的。
• word-wrap 是用來解決不可分割文本溢出容器的狀況的。

那麼文本是否可分割是由什麼控制的呢？顯然就是 word-break，因此 word-break 的優先級是高於 word-wrap 的。當設置了 word-break: break-all 後，就不存在不可分割文本了，那麼 word-wrap 屬性天然就無效了。

在咱們平常使用中，注意如下幾個點能夠很容易排除混淆：

首先，使用 overflow-wrap 替代 word-wrap，由於 word-wrap 與 word-break 這兩看久了真的容易眼花。

其次，不使用 word-break: break-word，一是它已經不被推薦使用了，就是個歷史遺留的坑爹屬性；二是太容易和 word-wrap: break-word 混淆了，雖然大多數狀況下它們的表現是同樣的。

最後，少使用 anywhere，一是目前在 chrome 的表現奇怪；二是 min-content 在平時使用的並很少，它會出現與 break-word 的不一樣的表現的場景並很少。

因此，咱們能用的值就只剩下：

word-break
normal	只有 soft wrap opportunity 可以換行
break-all	任意位置都可以換行（CJK 除外）
keep-all	CJK 只會在換行符處換行

overflow-wrap
normal	正常換行
break-word	分割單詞以知足換行

在常見的分割過單詞的場景，咱們須要設置 overflow-wrap: break-word。最後，爲何我要花這麼多時間來理清這兩規則的關係？

參考

• inline-breaking
• word-break
• overflow-wrap