單詞太長致使自動換行，出現空白區域。——word-wrap和word-break

寫在前面：

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

應用場景：

屬性的應用場景

word-wrap和word-break是什麼？

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

word-wrap的英文解釋

word-break的英文解釋

通過翻譯：word-wrap:

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

word-break:

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

何謂單詞內斷句？

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

下面是發生了單詞內斷句的狀況實例：

這裏面分別使用了word-wrap：break-word;和word-break:break-all;這裏能夠看到，效果是同樣的，下面再說說他們的區別。

word-wrap的屬性介紹

w3c：word-wrap

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

全部瀏覽器都支持

語法：

/* 二選一 */
word-wrap: normal;
word-wrap: break-word;複製代碼

解析：

normal就是你們日常見得最多的正常的換行規則，break-word若是長單詞超出了一行的長度的話，在一行中有能夠換行的標點時就換行，實在沒有能夠換行的地方時，纔在單詞中間換行。（這句的解析入下圖）

上圖就是：一行中有能夠換行的標點時就換行，實在沒有能夠換行的地方時，纔在單詞中間換行

word-break屬性的屬性介紹：

w3c上關於word-break屬性的介紹

瀏覽器支持：

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

語法使用：

/* 默認normal */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;複製代碼

解析：幾個關鍵字值的含義以下：
normal
使用默認的換行規則。

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：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。

參考連接：

word-break:break-all和word-wrap:break-word的區別

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

CSS3 word-wrap 屬性

CSS3 word-break 屬性