CSS控制本文換行：word

在頁(yè)面上對(duì)文本進(jìn)行修飾的時(shí)候，特別是針對(duì)西文文本，往往會(huì)涉及到單詞過(guò)長(zhǎng)需要換行的問(wèn)題（這里暫不討論CJK系的文本）。本篇文章將會(huì)討論兩個(gè)用于控制文本換行的CSS屬性word-wrap和word-break。

word-wrap

我們先來(lái)看看mozilla上如何定義word-wrap的。

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.

我們來(lái)嘗試翻譯一下這段定義，

word-wrap屬性用于說(shuō)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句（換句話說(shuō)，就是是否能夠強(qiáng)制換行），這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。

下圖是word-wrap屬性的詳細(xì)內(nèi)容，

其實(shí)有點(diǎn)CSS基礎(chǔ)的人看到這段定義，應(yīng)該就能明白這個(gè)CSS屬性是干什么用的了。不過(guò)為了更加明白的闡述，我們下面來(lái)看個(gè)例子。

下面的頁(yè)面是沒(méi)有設(shè)置任何CSS換行控制的表現(xiàn)，

從圖中可以看出來(lái)，句子最后個(gè)這個(gè)單詞see...e實(shí)在是太長(zhǎng)了，導(dǎo)致第一行已經(jīng)放不下了。雖然瀏覽器默認(rèn)將這個(gè)超長(zhǎng)的單詞放在第二行了，但是無(wú)奈這個(gè)容器仍然還是不夠?qū)挘罱K導(dǎo)致的結(jié)果就是這個(gè)單詞超出了容器，即所謂的溢出。

這里，其實(shí)有一點(diǎn)被隱藏的要素，就是，現(xiàn)代瀏覽器已經(jīng)夠聰明了，它知道第一行的空間已經(jīng)放不下這個(gè)長(zhǎng)單詞了，嘗試另起一行，將這個(gè)單詞放到新行上，但是新起的一行仍然不能容納這個(gè)長(zhǎng)單詞，此時(shí)瀏覽器也無(wú)能為力了。

此時(shí)，就需要我們的word-wrap屬性登場(chǎng)了。

.container {
    word-wrap: break-word;
}

效果如下圖，

現(xiàn)在ok了，這個(gè)超長(zhǎng)的單詞see...e已經(jīng)被強(qiáng)制換行了，雖然有點(diǎn)影響閱讀。

word-break

說(shuō)完了word-wrap，我們?cè)賮?lái)說(shuō)說(shuō)word-break，先來(lái)看看mozilla是如何定義這個(gè)屬性的，

The word-break CSS property is used to specify how (or if) to break lines within words.

對(duì)應(yīng)的翻譯如下，

CSS的word-break屬性用于說(shuō)明如何進(jìn)行單詞內(nèi)的斷句。

下圖是word-break屬性的詳細(xì)內(nèi)容，

這里我們使用如下語(yǔ)法，

.container {
    word-break: break-all
}

我們?cè)賮?lái)看看效果，

看到?jīng)]有，原來(lái)第一行空出來(lái)的那么點(diǎn)空間，現(xiàn)在也被填充了字符。

所以說(shuō)，word-break:break-all是一個(gè)非常暴力的屬性，它會(huì)為了充分利于頁(yè)面空間將無(wú)視任何限制，對(duì)任何長(zhǎng)單詞在任何字符處進(jìn)行斷句（有時(shí)間這將非常影響文本的閱讀）。

事實(shí)上，word-wrap:break-word與word-break:break-all共同點(diǎn)是都能把長(zhǎng)單詞強(qiáng)行斷句，不同點(diǎn)是word-wrap:break-word會(huì)首先起一個(gè)新行來(lái)放置長(zhǎng)單詞，新的行還是放不下這個(gè)長(zhǎng)單詞則會(huì)對(duì)長(zhǎng)單詞進(jìn)行強(qiáng)制斷句；而word-break:break-all則不會(huì)把長(zhǎng)單詞放在一個(gè)新行里，當(dāng)這一行放不下的時(shí)候就直接強(qiáng)制斷句了。

參考列表

• mozilla:word-wrap
• mozilla:word-break
• w3school:word-wrap
• w3school:word-break
• 你真的了解word-wrap和word-break的區(qū)別嗎？