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

我們一般控制換行所用到的CSS屬性一共有三個：word-wrap; word-break; white-space。這三個屬性可以說是專為了文字斷行而創(chuàng)造出來的辙售。首先我們得知道這三個屬性到底是做什么用地：

word-wrap語法：

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

各個瀏覽器均能識別

參數(shù)：

normal: 允許內(nèi)容頂開指定的容器邊界。

break-word: 內(nèi)容將在邊界內(nèi)換行右冻。必要時會觸發(fā)word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西勋眯，一為屬性另為參數(shù)）。

說明：

word-wrap是控制是否“為詞斷行”的叹侄，設(shè)置或檢索當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行吁恍。中文沒有任何問題扒秸，英文語句也沒問題。但是對于長串的英文冀瓦，就不起作用伴奥。

范例：

congratulation這個單詞屬于長串英文，word-wrap:break-word整個單詞看成一個整體翼闽，如果該行末端寬度不夠顯示整個單詞渔伯，它會自動把整個單詞放到下一行，而不會把單詞截斷肄程，這就是對于長串文字不起作用的解釋锣吼。word-wrap:normal是默認情況，英文單詞不被拆開蓝厌。

結(jié)論：

作用范圍僅為div這類標準塊級元素玄叠，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發(fā)揮效果的，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準）拓提。

word-break語法：

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

Firefox读恃、Opera不能識別

參數(shù)：

normal: 依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行。
break-all: 該行為與亞洲語言的normal相同寺惫。也允許非亞洲語言文本行的任意字內(nèi)斷開疹吃。該值適合包含一些非亞洲文本的亞洲文本。
keep-all: 與所有非亞洲語言的normal相同西雀。對于中文萨驶，韓文，日文艇肴，不允許字斷開腔呜。適合包含少量亞洲文本的非亞洲文本。

說明：

word-break:break-all再悼，是斷開單詞核畴。在單詞到邊界時，下個字母自動到下一行冲九。主要解決了長串英文的問題（恰恰彌補了上面word-wrap:break-word對于長串文字不起作用的缺陷）谤草。

范例：

繼續(xù)以上面congratulation這個單詞屬于長串英文，word-break:break-all它會把單詞截斷莺奸，該行末端就會變成類似conra(congratulation的前端部分)丑孩，下一行為tulation（conguatulation）的后端部分了。
word-break:keep-all憾筏，是指Chinese, Japanese, and Korean不斷詞。即只用此時花鹅，不用word-wrap氧腰，中文就不會換行了。（英文語句正常刨肃。）

結(jié)論：

作用范圍僅為div這類標準塊級元素古拴，th,td這類table元素雖然識別但是沒有效果（經(jīng)測試Chrome下word-break:break-all是有效果的，但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準）真友。Firefox,Opera是無法識別word-break的黄痪，更不用提Firefox下的th,td中使用word-break的效果了。

white-space語法：

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

參數(shù)：

normal: 默認盔然∥Υ颍空白會被瀏覽器忽略。
pre: 空白會被瀏覽器保留愈案。其行為方式類似HTML中的pre標簽挺尾。
nowrap: 文本不會換行，文本會在在同一行上繼續(xù)站绪，直到遇到br標簽為止遭铺。

說明：

對于pre屬性，其實就是HTML中連續(xù)的多個空白符會被合并，然后為了不讓他合并（最常用的場合就是表示代碼文字縮進）讓其中的空白符繼續(xù)保留而不需要我們增加額外的樣式和標簽來控制它的縮進和換行魂挂。pre標簽的原理也是一樣的內(nèi)部默認有了個white-space:pre甫题。
對于nowrap屬性，這個是強制不換行核心涂召，一般強制不換行就是利用這個屬性坠非。Firefox的div和td中，以及IE的div中芹扭，均沒有問題麻顶。唯一的瑕疵就是在IE的td中會有一個問題，如果td沒有指定寬度舱卡，則nowrap仍然有效辅肾，如果td有寬度，并且文字中無標點轮锥、無空格（例如中文長串文字）矫钓，nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題舍杜。

==總結(jié)強制換行==：

如果在div這類標準塊級元素中需要強制換行新娜，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺點就是會導(dǎo)致如果恰巧該行末端寬為一個長串英文單詞，那么該單詞會被撕開的尷尬樣式(而且FF不識別word-break既绩，反而不會撕開這個單詞)概龄。個人認為如果你這個div里面放的類似于URL這個長串地址，那么用此方案是非常不錯的選擇（注意：由于FF不識別word-break饲握，所以無法保證每行末端會整齊的斷開URL單詞私杜，但這也是無奈的選擇）。如果不是放置URL這類可以斷開的長串英文救欧，而是英文句子的話衰粹，那么使用word-wrap:break-word;即可。至于網(wǎng)上看到有word-wrap:break-word; overflow:hidden;這么個寫法笆怠，據(jù)說可以兼容IE和FF铝耻，但經(jīng)過親自測試似乎沒有什么特別效果。當(dāng)然蹬刷，如果你有更好的方案也可以留言參與討論瓢捉，這里也十分歡迎您的意見。
如果是在td,th這類table元素中需要強制換行办成，個人比較推薦的方式為：先為table設(shè)定table-layout:fixed泊柬，基本上設(shè)定完這個屬性后基本的換行問題都能夠解決而不會出現(xiàn)table中td,th因為里面各個內(nèi)容的多寡發(fā)生搶奪其他td,th寬度的情形發(fā)生。這時如果你依舊有強制換行問題诈火，那么在此td中內(nèi)部加一層div兽赁，那么情況就會像上面討論的方式來解決状答。

==總結(jié)強制不換行==：

強制不換行的問題到是比較容易分析的，就如上面所討論的那樣使用white-space:nowrap刀崖，F(xiàn)irefox的div和td中惊科，以及IE的div中，均沒有問題亮钦。唯一的瑕疵就是在IE的td中會有一個問題馆截，如果td沒有指定寬度，則nowrap仍然有效蜂莉，如果td有寬度蜡娶，并且文字中無標點、無空格（例如中文長串文字）映穗，nowrap則不再有效窖张。解決方式就是可以加word-break:keep-all;可以解決此問題。綜合下來蚁滋，比較穩(wěn)妥的方式是在文字與td之間再套一層div宿接，然后使用nowrap，那么就是強制不換行辕录。注意這時候很有可能文字會過多導(dǎo)致溢出容器睦霎，所以你還得加一個overflow:hidden，防止溢出容器走诞，這樣子就可以兼容各個瀏覽器了副女。
總結(jié)了那么多，發(fā)覺似乎也就那幾個屬性在瀏覽器里面的各種兼容性的平衡蚣旱，現(xiàn)在似乎尚未有一個完美的方案可以全部兼容各個瀏覽器碑幅，我們所能做的最多的就是盡可能的保持個瀏覽器顯示一致。如果你還是覺得一定要兼容所有的瀏覽器姻锁，那么最后的方案那么就是動用JS了枕赵，以后的文章中我會考慮從以最小的JS代價來滿足此要求猜欺，但這暫不在本文所討論的范圍內(nèi)位隶。
一般情況下，元素擁有默認的white-space:normal（自動換行开皿，PS：不換行是white-space:nowrap）,當(dāng)錄入的文字超過定義的寬度后會自動換行涧黄，但當(dāng)錄入的數(shù)據(jù)是一堆沒有空格的字符或字母或數(shù)字（常規(guī)數(shù)據(jù)應(yīng)該不會有吧，但有些測試人員是會這樣子做的）赋荆，超過容器寬度時就會把容器撐大笋妥，不換行。

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

{
word-break:break-all; /*支持IE春宣，chrome，F(xiàn)F不支持*/
word-wrap:break-word;/*支持IE，chrome月帝，F(xiàn)F*/
}

以下是對這兩種方法的區(qū)別說明：

1躏惋、word-break:break-all 例如div寬200px，它的內(nèi)容就會到200px自動換行嚷辅，如果該行末端有個英文單詞很長（congratulation等）簿姨，它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)簸搞，下一行為tulation（conguatulation）的后端部分了扁位。

2、word-wrap:break-word 例子與上面一樣趁俊，但區(qū)別就是它會把congratulation整個單詞看成一個整體域仇，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行则酝，而不會把單詞截斷掉的殉簸。

3、

word-break:break-all 支持版本：IE5以上 該行為與亞洲語言的 normal 相同沽讹。也允許非亞洲語言文本行的任意字內(nèi)斷開般卑。該值適合包含一些非亞洲文本的亞洲文本。

word-wrap:break-word 支持版本：IE5.5以上 內(nèi)容將在邊界內(nèi)換行爽雄。如果需要蝠检，詞內(nèi)換行( word-break )也將發(fā)生。表格自動換行挚瘟，避免撐開叹谁。

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

參數(shù)： normal : 依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行

break-all : 該行為與亞洲語言的normal相同乘盖。也允許非亞洲語言文本行的任意字內(nèi)斷開焰檩。該值適合包含一些非亞洲文本的亞洲文本

keep-all : 與所有非亞洲語言的normal相同。對于中文订框，韓文析苫，日文，不允許字斷開穿扳。適合包含少量亞洲文本的非亞洲文本

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

參數(shù)： normal : 允許內(nèi)容頂開指定的容器邊界

break-word : 內(nèi)容將在邊界內(nèi)換行衩侥。如果需要，詞內(nèi)換行（word-break）也行發(fā)生說明：設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時是否斷開轉(zhuǎn)行矛物。

建議：word-break 用W3C檢測會顯示問題的茫死，導(dǎo)致百度快照也會出問題-這個屬性O(shè)PERA 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;