【CSS】419- 徹底搞懂word-break、word-wrap、white-space
- 2019 年 11 月 25 日
- 筆記
測試程式碼
下面是本文中用於測試三個樣式屬性展現情況的html程式碼：
<div id="box"> Hi , This is a incomprehensibilities long word.</br> 你好 ， 這 是一個不可思議的長單詞</div>
現在只給了它一個寬度和邊框，沒有其它任何樣式，下面是它目前的展現情況：
可以看到，nbsp; 和 </br> 可以正常發揮作用，而連續的空格會被縮減成一個（比如This和is之間的三個空格變成了一個），換行符也全都無效。句子超過一行後會自動換行，而長度超過一行的單個單詞會超出邊界。
接下來我們看下， 給它上面三個css屬性賦值後會出現什麼變化。
white-space
正如它的名字，這個屬性是用來控制空白字元的顯示的，同時還能控制是否自動換行。它有五個值：normal | nowrap | pre | pre-wrap | pre-line。因為默認是 normal ，所以我們主要研究下其它四種值時的展現情況。
（為了方便比較，下文所有圖，左側為 normal 即初始情況，右側為賦上相應值時的情況）
先看下white-space: nowrap時的情況：
不僅空格被合併，換行符無效，連原本的自動換行都沒了！只有 </br> 才能導致換行！所以這個值的表現還是挺簡單的，我們可以理解為永不換行。
white-space: pre
空格和換行符全都被保留了下來！不過自動換行還是沒了。保留，所以 pre 其實是preserve的縮寫，這樣就好記了。
white-space: pre-wrap
顯然 pre-wrap 就是 preserve+wrap ，保留空格和換行符，且可以自動換行。
white-space: pre-line
空格被合併了，但是換行符可以發揮作用，line 應該是 new line 的意思，自動換行還在，所以 pre-line 其實是 preserve+new line+wrap。
我整理了一個表予以總結：
word-break
從這個名字可以知道，這個屬性是控制單詞如何被拆分換行的。它有三個值：normal | break-all | keep-all。
word-break: keep-all
所有「單詞」一律不拆分換行，注意，我這裡的「單詞」包括連續的中文字元（還有日文、韓文等），或者可以理解為只有空格可以觸發自動換行。
word-break: break-all
所有單詞碰到邊界一律拆分換行，不管你是incomprehensibilities這樣一行都顯示不下的單詞，還是long這樣很短的單詞，只要碰到邊界，都會被強制拆分換行。所以用 word-break: break-all 時要慎重呀。
這樣的效果好像並不太好呀，能不能就把incomprehensibilities拆一下，其它的單詞不拆呢？那就需要下面這個屬性了：
word-wrap（overflow-wrap）
word-wrap 又叫做 overflow-wrap ：
word-wrap 屬性原本屬於微軟的一個私有屬性，在 CSS3 現在的文本規範草案中已經被重名為 overflow-wrap 。word-wrap 現在被當作 overflow-wrap 的 「別名」。穩定的Google Chrome 和 Opera 瀏覽器版本支援這種新語法。
這個屬性也是控制單詞如何被拆分換行的，實際上是作為 word-break 的互補，它只有兩個值：normal | break-word，那我們看下 break-word：
終於達到了上文我們希望的效果，只有當一個單詞一整行都顯示不下時，才會拆分換行該單詞。
所以我覺得 overflow-wrap 更好理解好記一些，overflow，只有長到溢出的單詞才會被強制拆分換行！
（其實前面的 word-break 屬性除了列出的那三個值外，也有個 break-word 值，效果跟這裡的 word-wrap: break-word 一樣，然而只有Chrome、Safari等部分瀏覽器支援）
總結
最後總結一下三個屬性
- white-space：控制空白字元的顯示，同時還能控制是否自動換行。它有五個值：normal
|nowrap|pre|pre-wrap|pre-line - word-break：控制單詞如何被拆分換行。它有三個值：normal
|break-all|keep-all - word-wrap（overflow-wrap）：控制長度超過一行的單詞是否被拆分換行。是word-break的補充，它有兩個值：normal
|break-word
▼
原創系列推薦
▼
