強制換行與強制不換行問題曾經一度困擾著我，每當遇到換行問題時候那就是痛苦回憶的開始，現在終於痛定思痛，一鼓作氣把這個長期頑固問題給解決。
強制換行與強制不換行用到的屬性
我們一般控制換行所用到的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;可以解決此問題。
如果是在td,th這類table元素中需要強制換行，個人比較推薦的方式為：先為table設定table-layout:fixed，至於為什麼要設定這個屬性可參考我的《拿什麼來拯救你，我的table》這篇文章，裡面有比較詳細的說明。基本上設定完這個屬性後基本的換行問題都能夠解決而不會出現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代價來滿足此要求，但這暫不在本文所討論的範圍內。
攻略強制換行與強制不換行
強制換行與強制不換行問題曾經一度困擾著我，每當遇到換行問題時候那就是痛苦回憶的開始，現在終於痛定思痛，一鼓作氣把這個長期頑固問題給解決。強制換行與強制不換行用到的屬性 我們一般控制換行所用到的css屬性一共有三個 word wrap word break white space。這三個屬性可以說是專...
強制換行與強制不換行
強制換行與強制不換行用到的屬性 我們一般控制換行所用到的css屬性一共有三個 word wrap word break white space。這三個屬性可以說是專為了文字斷行而創造出來的。首先我們得知道這三個屬性到底是做什麼用地 word wrap語法 word wrap normal 預設 br...
div強制換行和強制不換行
1 強制不換行，同時以省略號結尾。你好朋友朋友朋友我為什麼不能看到效果啊 2 css自動換行 div3 css強制英文單詞斷行 div若是div巢狀，要使內層div根據內容自動換行，則可只設定外層的div寬，和 white spance nowrap即可。word break break all和w...