不設定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 屬性的值。
參考文章