寫在前面：

在寫頁面的時候，偶爾有時會遇到下圖這兩種情況，一種是單詞過長時會溢位div，一種是直接換行，導致出現空白區域。這兩個情景就需要word-wrap、word-break這兩個屬性出場來解決了。閒話不扯了，本文主要內容有：word-wrap和word-break**屬性介紹，使用方法，他們之間的區別，瀏覽器相容性，demo連結**。需要的朋友可以過來參考下，喜歡的可以點個贊，希望能對大家有所幫助。

應用場景：

word-wrap和word-break是什麼？

在mozilla的官網上找到如下的解釋：

經過翻譯：word-wrap:

css的 word-wrap 屬性用來標明是否允許

word-break:

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

何謂單詞內斷句？

這個單詞沒有發生單詞內斷句的情況，這個單詞太長了，溢位了容器的範圍。

下面是發生了單詞內斷句的情況例項：

這裡面分別使用了word-wrap：break-word;和word-break:break-all;這裡可以看到，效果是一樣的，下面再說說他們的區別。

word-wrap的屬性介紹

word-wrap的瀏覽器支援情況：

語法：

/* 二選一 */
 

word-wrap: normal;
word-wrap: break-word;

解析：

normal就是大家平常見得最多的正常的換行規則，break-word如果長單詞超出了一行的長度的話，在一行中有可以換行的標點時就換行，實在沒有可以換行的地方時，才在單詞中間換行。（這句的解析入下圖）

上圖就是：一行中有可以換行的標點時就換行，實在沒有可以換行的地方時，才在單詞中間換行

word-break屬性的屬性介紹：

瀏覽器支援：

除了opera不支援以外，其他都支援（火狐也從不支援改為支援了）!

語法使用：


/* 預設normal */
word-break: normal;
word-break: break-all;
word-break: keep-all;


break-all
允許任意非CJK(Chinese/Japanese/Korean)文字間的單詞斷行。(這裡是CJK中文，日文，韓文的意思)

keep-all
不允許CJK(Chinese/Japanese/Korean)文字中的單詞換行，只能在半形空格或連字元處換行。非CJK文字的行為實際上和normal一致。(一致性可看下圖的demo效果)

word-break:break-all和word-wrap:break-word之間的區別：

其實可以從上述demo栗子中看出來：

word-break:break-all碰到英文單詞統統都換行，只要到了容器的邊界就會換行，不浪費一點空間，一點空隙都不放過。

而word-wrap:break-word在一行中有可以換行點時就換行，實在沒有可以換行的地方時，才在單詞中間換行。

這裡所說的換行點指的是：如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的，讓這些換行點換行，至於對不對齊，好不好看，則不關心，因此，很容易出現一片一片牛皮癬一樣的空白的情況。

後話：

以上就是本文的內容了，其實大概分清他們的區別，以後碰到這型別問題，知道需要用哪個屬性來解決就好了。

最後：因為我經常看不懂別人寫的分享，所以個人寫文比較偏小白，寫的不好之處，歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
簡書主頁連結，

參考連結：