white

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

測(cè)試代碼

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

下面是本文中用于測(cè)試三個(gè)樣式屬性展現(xiàn)情況的html代碼：

<div id="box"> Hi , This is a incomprehensibilities long word. </br> 你好 ， 這 是一個(gè)不可思議的長(zhǎng)單詞</div>

現(xiàn)在只給了它一個(gè)寬度和邊框，沒(méi)有其它任何樣式，下面是它目前的展現(xiàn)情況：

可以看到，nbsp;和</br>可以正常發(fā)揮作用，而連續(xù)的空格會(huì)被縮減成一個(gè)（比如This和is之間的三個(gè)空格變成了一個(gè)），換行符也全都無(wú)效。句子超過(guò)一行后會(huì)自動(dòng)換行，而長(zhǎng)度超過(guò)一行的單個(gè)單詞會(huì)超出邊界。

接下來(lái)我們看下， 給它上面三個(gè)css屬性賦值后會(huì)出現(xiàn)什么變化。

white-space

正如它的名字，這個(gè)屬性是用來(lái)控制空白字符的顯示的，同時(shí)還能控制是否自動(dòng)換行。它有五個(gè)值：normal | nowrap | pre | pre-wrap | pre-line。因?yàn)槟J(rèn)是normal，所以我們主要研究下其它四種值時(shí)的展現(xiàn)情況。

（為了方便比較，下文所有圖，左側(cè)為normal即初始情況，右側(cè)為賦上相應(yīng)值時(shí)的情況）

先看下white-space:nowrap時(shí)的情況：

不僅空格被合并，換行符無(wú)效，連原本的自動(dòng)換行都沒(méi)了！只有</br>才能導(dǎo)致?lián)Q行！所以這個(gè)值的表現(xiàn)還是挺簡(jiǎn)單的，我們可以理解為永不換行。

white-space:pre：

空格和換行符全都被保留了下來(lái)！不過(guò)自動(dòng)換行還是沒(méi)了。保留，所以pre其實(shí)是prerve的縮寫，這樣就好記了。

white-space:pre-wrap：

顯然pre-wrap就是prerve+wrap，保留空格和換行符，且可以自動(dòng)換行。

white-space:pre-line：

空格被合并了，但是換行符可以發(fā)揮作用，line應(yīng)該是new line的意思，自動(dòng)換行還在，所以pre-line其實(shí)是prerve+new line+wrap。

我整理了一個(gè)表予以總結(jié)：

word-break

從這個(gè)名字可以知道，這個(gè)屬性是控制單詞如何被拆分換行的。它有三個(gè)值：normal | break-all | keep-all。

word-break:keep-all：

所有“單詞”一律不拆分換行，注意，我這里的“單詞”包括連續(xù)的中文字符（還有日文、韓文等），或者可以理解為只有空格可以觸發(fā)自動(dòng)換行

word-break:break-all：

所有單詞碰到邊界一律拆分換行，不管你是incomprehensibilities這樣一行都顯示不下的單詞，還是long這樣很短的單詞，只要碰到邊界，都會(huì)被強(qiáng)制拆分換行。所以用word-break:break-all時(shí)要慎重呀。

這樣的效果好像并不太好呀，能不能就把incomprehensibilities拆一下，其它的單詞不拆呢？那就需要下面這個(gè)屬性了：

word-wrap（overflow-wrap）

word-wrap又叫做overflow-wrap：

word-wrap 屬性原本屬于微軟的一個(gè)私有屬性，在 CSS3 現(xiàn)在的文本規(guī)范草案中已經(jīng)被重名為 overflow-wrap 。 word-wrap 現(xiàn)在被當(dāng)作 overflow-wrap 的 “別名”。 穩(wěn)定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語(yǔ)法。

這個(gè)屬性也是控制單詞如何被拆分換行的，實(shí)際上是作為word-break的互補(bǔ)，它只有兩個(gè)值：normal | break-word，那我們看下break-word：

終于達(dá)到了上文我們希望的效果，只有當(dāng)一個(gè)單詞一整行都顯示不下時(shí)，才會(huì)拆分換行該單詞。

所以我覺(jué)得overflow-wrap更好理解好記一些，overflow，只有長(zhǎng)到溢出的單詞才會(huì)被強(qiáng)制拆分換行！

（其實(shí)前面的word-break屬性除了列出的那三個(gè)值外，也有個(gè)break-word值，效果跟這里的word-wrap:break-word一樣，然而只有Chrome、Safari等部分瀏覽器支持）

總結(jié)

最后總結(jié)一下三個(gè)屬性

white-space，控制空白字符的顯示，同時(shí)還能控制是否自動(dòng)換行。它有五個(gè)值：normal | nowrap | pre | pre-wrap | pre-lineword-break，控制單詞如何被拆分換行。它有三個(gè)值：normal | break-all | keep-allword-wrap（overflow-wrap）控制長(zhǎng)度超過(guò)一行的單詞是否被拆分換行，是word-break的補(bǔ)充，它有兩個(gè)值：normal | break-word

相信讀完了本文，你應(yīng)該對(duì)white-space、word-break、word-wrap有比較系統(tǒng)的認(rèn)識(shí)了吧，如果短時(shí)間還是記不住，收藏一下常看看就能記住的XD~如果你喜歡這篇文章的話，希望能點(diǎn)個(gè)贊~

下面是本文里所有例子的代碼的地址，每個(gè)屬性做成了選項(xiàng)，方便操作學(xué)習(xí)~

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