簡單理解 word-wrap、word-break 和 white-space 的區別

不設置word-warp和word-break的時候，一行單詞，超過了容器的寬度是，會將最後一個單詞下移一行進行顯示，若是下移的那個單詞長度仍是超過了容器寬度，則會溢出

word-wrap

設置word-wrap: break-word時，先把長單詞移動到下一行，而後若是仍是超出容器寬度，則進行單詞內的斷句換行

後面的單詞同上述規則

word-break

當上述狀況，長單詞移動到下一行的時候，第一行會有必定空餘的空間，較爲浪費資源。
因而經過設置word-break: break-all，長單詞不移動到下一行，直接在當前行進行斷句換行

white-space

做用於空格和回車，用於控制空格是否合併、回車是否可折行、句子太長是否在空格處折行

經常使用取值不一樣的做用：

• normal: 默認。空白會被瀏覽器忽略。
• pre: 空白會被瀏覽器保留。其行爲方式相似 HTML 中的<pre>標籤。
• nowrap: 文本不會換行，文本會在在同一行上繼續，直到遇到<br>標籤爲止。
• pre-wrap: 保留空白符序列，可是正常地進行換行。
• pre-line: 合併空白符序列，可是保留換行符。
• inherit: 規定應該從父元素繼承 white-space 屬性的值。

參考文章

• 你真的瞭解word-wrap和word-break的區別嗎？
• white-space、word-wrap和word-break區別