CSS控制本文換行：word

在頁面上對文本進行修飾的時候，特別是針對西文文本，往往會涉及到單詞過長需要換行的問題（這里暫不討論CJK系的文本）。本篇文章將會討論兩個用于控制文本換行的CSS屬性word-wrap和word-break。

word-wrap

我們先來看看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.

我們來嘗試翻譯一下這段定義，

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

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

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

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

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

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

此時，就需要我們的word-wrap屬性登場了。

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

效果如下圖，

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

word-break

說完了word-wrap，我們再來說說word-break，先來看看mozilla是如何定義這個屬性的，

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

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

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

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

這里我們使用如下語法，

.container {
    word-break: break-all
}

我們再來看看效果，

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

所以說，word-break:break-all是一個非常暴力的屬性，它會為了充分利于頁面空間將無視任何限制，對任何長單詞在任何字符處進行斷句（有時間這將非常影響文本的閱讀）。

事實上，word-wrap:break-word與word-break:break-all共同點是都能把長單詞強行斷句，不同點是word-wrap:break-word會首先起一個新行來放置長單詞，新的行還是放不下這個長單詞則會對長單詞進行強制斷句；而word-break:break-all則不會把長單詞放在一個新行里，當這一行放不下的時候就直接強制斷句了。

參考列表

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