white-space、word-break、word-wrap（overflow-wrap）估計是css裡最基本又最讓人迷惑的三個屬性了，我也是用了n次都經常搞混，必須系統整理一下，今天我們就把這三個屬性徹底搞清楚！

測試代碼

(文末有本文中所有例子的代碼)

下面是本文中用于測試三個樣式屬性展現情況的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 的 “别名”。 穩定的谷歌 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-lineword-break，控制單詞如何被拆分換行。它有三個值：normal | break-all | keep-allword-wrap（overflow-wrap）控制長度超過一行的單詞是否被拆分換行，是word-break的補充，它有兩個值：normal | break-word

相信讀完了本文，你應該對white-space、word-break、word-wrap有比較系統的認識了吧，如果短時間還是記不住，收藏一下常看看就能記住的XD~如果你喜歡這篇文章的話，希望能點個贊~

下面是本文裡所有例子的代碼的地址，每個屬性做成了選項，方便操作學習~

https://codepen.io/YGYOOO/pen/jvyrWK

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!