[轉]相容多浏覽器，相容 div、p、td 的強制不換行及強制換行

 ​

關于強制不換行、強制換行的話題在網上已經被讨論了無數次，但我發現都不夠全面，沒有充分考慮各種浏覽器、各種标簽等情況，以緻不相容，是以我再來說說。由于 div 和 p 在本文的讨論中，效果相同，是以省略 p。

文中“沒有指定寬度的 td”是指：為 table 指定了寬度，但沒有給 td 指定寬度。

強制不換行

div,

td

{

    white-space:nowrap;

}

這點在 Firefox 的 div 和 td 中，以及 IE 的 div 中，均沒有問題。在 IE 的 td 中卻很複雜：

如果沒有為 td 指定寬度，則上述代碼仍然有效。 

如果為 td 指定了寬度，并且文字中無标點、無空格，上述代碼不再有效。可以加 word-break:keep-all; 解決，這是 CSS3 的内容，不過是 IE 最先提出的，是以 IE6 中也支援。 

如果為 td 指定了寬度，并且文字中有标點或空格。可以在文字與 td 之間套一層 div 加以解決。

綜合起來，為了簡單，使用：

div

隻是為了相容 IE 的 td 的不同情況，在文字與 td 之間套一層 div。

強制換行

強制換行是為了遇到一些超長的連續字元串（比如 aaaaaaaaaaaaa）時不撐大布局。

    word-break:break-all;

word-wrap:break-word; 相容性不夠廣，是以我們使用的是 word-break:break-all;。上述代碼相容于 IE、Chrome 的 div、指定寬度的 td、沒有指定寬度的 td，非常不錯，遺憾的是 Firefox 中不支援這個屬性，是以無效果，為了不讓其擠亂表格，可以加 overflow:hidden 來湊合着解決。

知其然知其是以然

上面介紹了三種屬性：

white-space : normal | nowrap 

word-wrap : normal | break-word 

word-break : normal | break-all | keep-all

white-space

空白的處理方式，不止兩個屬性值，但在 IE6 中隻支援這兩個，是以不介紹其他的。

normal 多個連續英文空格壓縮為一個英文空格顯示，在空白處可換行。 

nowrap 強制在同一行内顯示所有文本，直到文本結束或者遭遇 br 對象。

word-wrap

内容超過容器邊界時是否斷開轉行。

normal 允許（隻是允許，不是必須）内容頂開指定的容器邊界。 

break-word 内容将在邊界内換行。

word-break

換行的方式。

normal 英文在标點和空白處換行，中文在任何地方換行。 

break-all 英文和中文都在任何地方換行，比如從一個英文單詞的中間拆開換行。 

keep-all 英文和中文都在标點和空白處換行。