之前通過(guò)幾何分形學(xué)學(xué)習(xí)了一下緩存機(jī)制，今天來(lái)學(xué)習(xí)一下“字詞分割學(xué)”吧，哈哈哩照，我自己瞎造的詞丽旅，主要是為了學(xué)習(xí)一下CSS的兩個(gè)屬性：word-wrap和word-break椰棘。
word-wrap
設(shè)置或檢索當(dāng)內(nèi)容超過(guò)指定容器的邊界時(shí)是否斷行。
該屬性的值有：
- normal：允許內(nèi)容頂開(kāi)或溢出指定容器的邊界榄笙。（即使內(nèi)容超出邊界也不斷行邪狞。）
- break-word：內(nèi)容將在邊界內(nèi)換行。如果需要茅撞，單詞內(nèi)部允許斷行帆卓。（當(dāng)長(zhǎng)單詞所占據(jù)的寬度超過(guò)容器的寬度時(shí)巨朦，這個(gè)長(zhǎng)單詞會(huì)被換行顯示。）
<i>注：word-wrap屬性最開(kāi)始是IE的私有屬性剑令，后期被w3c采納為標(biāo)準(zhǔn)屬性糊啡，到CSS3時(shí)，該屬性被更名為語(yǔ)義更準(zhǔn)確的overflow-wrap吁津。</i>
word-break
設(shè)置或檢索對(duì)象內(nèi)文本的字內(nèi)換行行為悔橄。
該屬性的值有：
- normal：亞洲語(yǔ)言允許字內(nèi)換行，非亞洲語(yǔ)言不允許字內(nèi)換行腺毫。
- keep-all：亞洲語(yǔ)言和非亞洲語(yǔ)言<b>都不允許</b>字內(nèi)換行癣疟。
- break-all：亞洲語(yǔ)言和非亞洲語(yǔ)言<b>都允許</b>字內(nèi)換行。
<i>注：通常潮酒，為了防止無(wú)意義的長(zhǎng)單詞打破頁(yè)面布局睛挚，我們會(huì)使用word-break:break-all;設(shè)置文本樣式。</i>
demo在這里
擴(kuò)展
我們常常會(huì)收到這樣的需求：比如急黎，文章列表的標(biāo)題扎狱，希望單行顯示，固定寬度勃教，超出部分要用省略號(hào)代替淤击。
這個(gè)需求要使用到CSS的另外一個(gè)屬性叫white-space，這個(gè)屬性的作用是<b>設(shè)置或檢索對(duì)象內(nèi)空格的處理方式</b>故源，該屬性的屬性值有：
- normal：默認(rèn)處理方式污抬。
- pre：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離绳军，當(dāng)文字超出邊界時(shí)不換行印机。
- nowrap：<b>強(qiáng)制在同一行內(nèi)顯示所有文本</b>，合并文本間的多余空白门驾，直到文本結(jié)束或者遭遇br對(duì)象射赛。
- pre-wrap：用等寬字體顯示預(yù)先格式化的文本，不合并文字間的空白距離奶是，當(dāng)文字碰到邊界時(shí)發(fā)生換行楣责。
- pre-line：保持文本的換行，不保留文字間的空白距離聂沙，當(dāng)文字碰到邊界時(shí)發(fā)生換行秆麸。
需求是，文章列表標(biāo)題要單行顯示逐纬，很明顯蛔屹，就需要設(shè)置white-space:nowrap;僅僅使用這一個(gè)屬性只能滿足標(biāo)題單行顯示，如果標(biāo)題字?jǐn)?shù)特別多豁生，導(dǎo)致標(biāo)題所占據(jù)的寬度超過(guò)容器的寬度時(shí)兔毒，就會(huì)發(fā)生文字溢出的現(xiàn)象漫贞，所以，我們還需要設(shè)置overflow:hidden;來(lái)隱藏超出容器部分的文字育叁。需求里還有一點(diǎn)迅脐，就是超出部分要用省略號(hào)代替，這個(gè)也可以用CSS來(lái)實(shí)現(xiàn)豪嗽，只需設(shè)置text-overflow:ellipsis;即可谴蔑。所以，最終滿足需求的所有代碼如下：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
參考：
CSS參考手冊(cè)
word-break:break-all和word-wrap:break-word的區(qū)別
