不一樣瀏覽器下word-wrap,word-break,white-space強制換行和不換行總結

強制換行與強制不換行用到的屬性

咱們通常控制換行所用到的CSS屬性一共有三個：word-wrap; word-break; white-space。這三個屬性能夠說是專爲了文字斷行而創造出來的。首先咱們得知道這三個屬性究竟是作什麼用地：

word-wrap語法：

word-wrap: normal(默認) | break-word

各個瀏覽器均能識別

參數：

normal: 容許內容頂開指定的容器邊界。

break-word: 內容將在邊界內換行。必要時會觸發word-break（注意：請分辨清楚word-break和break-word這倆個是不一樣的東西，一爲屬性另爲參數）。

說明：

word-wrap是控制是否「爲詞斷行」的，設置或檢索當前行超過指定容器的邊界時是否斷開轉行。中文沒有任何問題，英文語句也沒問題。可是對於長串的英文，就不起做用。

範例：

congratulation這個單詞屬於長串英文，word-wrap:break-word整個單詞當作一個總體，若是該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷，這就是對於長串文字不起做用的解釋。word-wrap:normal是默認狀況，英文單詞不被拆開。

結論：

做用範圍僅爲div這類標準塊級元素，th,td這類table元素雖然識別可是沒有效果（若是爲td,th加上寬度word-wrap在IE下是可以發揮效果的，但根據徹底兼容性方便記憶角度上來講仍是之前面的結論爲準）。

word-break語法：

word-break: normal(默認) | break-all | keep-all

Firefox、Opera不能識別

參數：

normal: 依照亞洲語言和非亞洲語言的文本規則，容許在字內換行。 break-all: 該行爲與亞洲語言的normal相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。 keep-all: 與全部非亞洲語言的normal相同。對於中文，韓文，日文，不容許字斷開。適合包含少許亞洲文本的非亞洲文本。

說明：

word-break:break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題（偏偏彌補了上面word-wrap:break-word對於長串文字不起做用的缺陷）。

範例：

繼續以上面congratulation這個單詞屬於長串英文，word-break:break-all它會把單詞截斷，該行末端就會變成相似conra(congratulation的前端部分)，下一行爲tulation（conguatulation）的後端部分了。 word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）

結論：

做用範圍僅爲div這類標準塊級元素，th,td這類table元素雖然識別可是沒有效果（經測試Chrome下word-break:break-all是有效果的，但根據徹底兼容性方便記憶角度上來講仍是之前面的結論爲準）。Firefox,Opera是沒法識別word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space語法：

white-space: normal(默認) | pre | nowrap

參數：

normal: 默認。空白會被瀏覽器忽略。 pre: 空白會被瀏覽器保留。其行爲方式相似HTML中的pre標籤。 nowrap: 文本不會換行，文本會在在同一行上繼續，直到遇到br標籤爲止。

說明：

對於pre屬性，其實就是HTML中連續的多個空白符會被合併，而後爲了避免讓他合併（最經常使用的場合就是表示代碼文字縮進）讓其中的空白符繼續保留而不須要咱們增長額外的樣式和標籤來控制它的縮進和換行。pre標籤的原理也是同樣的內部默認有了個white-space:pre。 對於nowrap屬性，這個是強制不換行核心，通常強制不換行就是利用這個屬性。Firefox的div和td中，以及IE的div中，均沒有問題。惟一的瑕疵就是在IE的td中會有一個問題，若是td沒有指定寬度，則nowrap仍然有效，若是td有寬度，而且文字中無標點、無空格（例如中文長串文字），nowrap則再也不有效。解決方式就是能夠加word-break:keep-all;能夠解決此問題。

---

==總結強制換行==：

若是在div這類標準塊級元素中須要強制換行，最廣泛的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺點就是會致使若是恰巧該行末端寬爲一個長串英文單詞，那麼該單詞會被撕開的尷尬樣式(並且FF不識別word-break，反而不會撕開這個單詞)。我的認爲若是你這個div裏面放的相似於URL這個長串地址，那麼用此方案是很是不錯的選擇（注意：因爲FF不識別word-break，因此沒法保證每行末端會整齊的斷開URL單詞，但這也是無奈的選擇）。若是不是放置URL這類能夠斷開的長串英文，而是英文句子的話，那麼使用word-wrap:break-word;便可。至於網上看到有word-wrap:break-word; overflow:hidden;這麼個寫法，聽說能夠兼容IE和FF，但通過親自測試彷佛沒有什麼特別效果。固然，若是你有更好的方案也能夠留言參與討論，這裏也十分歡迎您的意見。 若是是在td,th這類table元素中須要強制換行，我的比較推薦的方式爲：先爲table設定table-layout:fixed，基本上設定完這個屬性後基本的換行問題都可以解決而不會出現table中td,th由於裏面各個內容的多寡發生搶奪其餘td,th寬度的情形發生。這時若是你依舊有強制換行問題，那麼在此td中內部加一層div，那麼狀況就會像上面討論的方式來解決。

---

==總結強制不換行==：

強制不換行的問題到是比較容易分析的，就如上面所討論的那樣使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均沒有問題。惟一的瑕疵就是在IE的td中會有一個問題，若是td沒有指定寬度，則nowrap仍然有效，若是td有寬度，而且文字中無標點、無空格（例如中文長串文字），nowrap則再也不有效。解決方式就是能夠加word-break:keep-all;能夠解決此問題。綜合下來，比較穩妥的方式是在文字與td之間再套一層div，而後使用nowrap，那麼就是強制不換行。注意這時候頗有可能文字會過多致使溢出容器，因此你還得加一個overflow:hidden，防止溢出容器，這樣子就能夠兼容各個瀏覽器了。 總結了那麼多，發覺彷佛也就那幾個屬性在瀏覽器裏面的各類兼容性的平衡，如今彷佛還沒有有一個完美的方案能夠所有兼容各個瀏覽器，咱們所能作的最多的就是儘量的保持個瀏覽器顯示一致。若是你仍是以爲必定要兼容全部的瀏覽器，那麼最後的方案那麼就是動用JS了，之後的文章中我會考慮從以最小的JS代價來知足此要求，但這暫不在本文所討論的範圍內。 通常狀況下，元素擁有默認的white-space:normal（自動換行，PS：不換行是white-space:nowrap）,當錄入的文字超過定義的寬度後會自動換行，但當錄入的數據是一堆沒有空格的字符或字母或數字（常規數據應該不會有吧，但有些測試人員是會這樣子作的），超過容器寬度時就會把容器撐大，不換行。

解決方法（以IE，chrome,FF爲測試瀏覽器）：

{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word;/*支持IE，chrome，FF*/
}
複製代碼

如下是對這兩種方法的區別說明：

一、word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，若是該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端爲conra(congratulation的前端部分)，下一行爲tulation（conguatulation）的後端部分了。

二、word-wrap:break-word 例子與上面同樣，但區別就是它會把congratulation整個單詞當作一個總體，若是該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

三、

word-break:break-all 支持版本：IE5以上 該行爲與亞洲語言的 normal 相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。

word-wrap:break-word 支持版本：IE5.5以上 內容將在邊界內換行。若是須要，詞內換行( word-break )也將發生。表格自動換行，避免撐開。

語法：word-break : normal | break-all | keep-all

參數： normal : 依照亞洲語言和非亞洲語言的文本規則，容許在字內換行

break-all : 該行爲與亞洲語言的normal相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本

keep-all : 與全部非亞洲語言的normal相同。對於中文，韓文，日文，不容許字斷開。適合包含少許亞洲文本的非亞洲文本

語法： word-wrap : normal | break-word

參數： normal : 容許內容頂開指定的容器邊界

break-word : 內容將在邊界內換行。若是須要，詞內換行（word-break）也行發生說明：設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。

建議：word-break 用W3C檢測會顯示問題的，致使百度快照也會出問題-這個屬性OPERA FIREFOX 瀏覽器也不支持 word-break屬性能夠用white-space:normal;來代替，這樣在FireFox和IE下就都能正確換行，並且要注意，單詞間的空格不能用 來代替，否則不能正確換行。

兼容 IE 和 FF 的換行 CSS 推薦樣式

  最好的方式是word-wrap:break-word; overflow:hidden; 而不是word-wrap:break-word; word-break:break-all; 也不是word-wrap:break-word; overflow:auto;