你真的瞭解word-wrap和word-break的區別嗎？

這兩個東西是什麼，我相信至今還有不少人搞不清，只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句，又或者是由於這兩個東西實在是太拗口了，長得又差很少，致使連背都很難背下來。

那它們究竟是什麼呢？我在mozilla的官網上找到以下的解釋：

word-wrap

word-break

咱們看到兩個解釋中都出現了 break lines within words 這樣的詞彙，說明它們都跟單詞內斷句又關。而後咱們試着翻譯一下上面的兩段英文：

word-wrap:

css的 word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。

word-break:

css的 word-break 屬性用來標明怎麼樣進行單詞內的斷句。

 

貌似從上面兩個讀着都蛋疼的翻譯中找到了一些區別：word-wrap 強調的是是否容許單詞內斷句，而word-break強調的則是怎麼樣來進行單詞內的斷句。

說到這裏，好像依然不是很明朗，好吧，表達能力差的孩紙真是傷不起啊，只能用些實例來補救了。

首先，何謂單詞內斷句？固然這裏指的都是西文單詞。

這是沒有單詞內斷句的狀況，咱們看到那個單詞是在是太長了，因此它溢出了包裹它的容器。

這是進行了單詞內斷句的狀況，就是一個單詞被斷做了兩行。

 

先要明確一點，不加word-wrap或word-break的時候，就是瀏覽器默認的時候，若是有一個單詞很長，致使一行中剩下的空間已經放不下它時，則瀏覽器會把這個單詞挪到下一行去：

word..d 這個咱們創造出來的單詞原本應該緊接在 long 後面的，可是long後剩下的空間已經不夠了，而單詞默認是不能斷開的，因此瀏覽器就只好把它屈尊下移了。

 

這個長單詞還不算變態的，由於至少它沒有長到超過包裹它的元素的長度，可是若是超過了呢？

若是超過了就像前面咱們提到過的，它會溢出它的父容器外，由於這時它是不容許被截斷的，那就只能衝出去咯。

 

這個時候word-wrap就能派上用場了。咱們給這段文字加上word-wrap:break-word看看會怎麼樣

哈哈，你給我滾回去吧，變態的長單詞，即便你斷了也無所謂。

這樣，爲了防止長單詞溢出，就在它的內部斷句了。這就是 word-wrap:break-word 的功能。

在看看word-wrap的瀏覽器支持狀況：

很好，幾乎全部瀏覽器都支持。

好吧，你如今能夠說了，都有了word-wrap這個東西，那還要 word-break 來幹什麼鳥？

萬惡的資本家老是想要榨乾勞動者的一切，你看，下圖中的long後面不是還有一段空間嗎，難道就這樣放着？太浪費了。。。

是啊，long後面那裏足能夠放好幾個短的單詞了，都是那個臭變態的長單詞！

因此IE真的很體貼，不要再罵它啦，考慮到不浪費一點點空間的問題，它創造出了 word-break 這個東西。如今咱們來看看使用 word-break:break-all; 後會怎麼樣。

看看發生什麼了？那個變態的長單詞並無被挪到下一行，而是直接放在了long後面，而後在父容器的右邊界斷開了。因此，它沒有浪費空間了哦。

再看下word-break:break-all的瀏覽器支持狀況：

除了opera外，其餘都支持耶（火狐也從不支持改成支持了）!

最開始咱們說了，word-wrap 是用來決定允不容許單詞內斷句的，若是不容許的話長單詞就會溢出。最重要的一點是它仍是會首先嚐試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。

而word-break:break-all則更變態，由於它斷句的方式很是粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句。這也能夠解釋爲何說它的做用是決定用什麼方式來斷句的，那就是——用了word-break:break-all，就等於使用粗暴方式來斷句了。總之一句話，若是您想更節省空間，那就用word-break:break-all就對了！

但不管如何，單詞內的斷句都會對西文的可讀性產生必定的影響，有時候這點就要注意了。

ps:網上有些文章說，word-wrap:break-word 對長串英文不起做用，其實這是很是錯誤的，word-wrap:break-word照樣能把一個長串英文或數字拆成多行。事實上，word-wrap:break-word與word-break:break-all共同點是都能把長單詞強行斷句，不一樣點是word-wrap:break-word會首先起一個新行來放置長單詞，新的行仍是放不下這個長單詞則會對長單詞進行強制斷句；而word-break:break-all則不會把長單詞放在一個新行裏，當這一行放不下的時候就直接強制斷句了。