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 
{ 
    white-space:nowrap; 
} 
只是爲了兼容 IE 的 td 的不一樣狀況，在文字與 td 之間套一層 div。 
強制換行 
強制換行是爲了遇到一些超長的連續字符串（好比 aaaaaaaaaaaaa）時不撐大布局。 
div, 
td 
{ 
    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 英文和中文都在標點和空白處換行。 
用css控制td強制換行 2008-10-23 16:11 即使是給td限定的寬度，可是若是裏面的內容是連續的，IE就認爲是一個單詞，不會換行。控制td換行的css樣式：style="word-wrap:break-word;word- break:break-all;" 
1<table width="100%" border="0" cellspacing="1" cellpadding="0">        
2 <tr> 
3  <td width="25%" style="word-wrap:break-word;word-break:break-all;"   valign="bottom" > 
4 文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息文本測試信息</td> 
5 </tr> 
6</table>
解決長串英文字母不能自動換行的問題和td中漢字自動換行 & CSS強制不換行 
編程心得   2009-10-15 10:24   閱讀85   評論0   字號： 大大  中中  小小 例如：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能處理自動換行，將表格伸的很長很長，而漢字字符卻能夠自動換行。 
緣由是： 
英文字母之間若是沒有空格，系統認爲是一個單詞，就不會自動換行。漢字就沒有這種狀況。 
解決辦法： 
用表格把要顯示的內容裝起來。 
在<table>標籤中加入「style='TABLE-LAYOUT: fixed'」, 
在須要強制單詞換行的<td>標籤中加入「style='word-WRAP: break-word'」。 
這樣就能夠了。 
      Div 中 ：   
div 實現長英文字母自動換行CSS 
IE瀏覽器 
#wrap{white-space:normal; width:200px; } 
或者 
#wrap{word-break:break-all;width:200px;} 
Firefox瀏覽器 
#wrap{white-space:normal; width:200px; overflow:auto;} 
或者 
#wrap{word-break:break-all;width:200px; overflow:auto; } 
二、不設置單元格寬度，但漢字會自動換行： 
      解決方法： <table style='word-break:keep-all'> 
CSS強制不換行 
word-break屬性, keep-all；不換行。。     IE7和FF   , IE6 不行。。 
white-space: nowrap;        IE6 及一下版本 
順便寫下語法： 
語法： 
white-space : normal | pre | nowrap  
取值： 
normal   : 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行  
pre   : 換行和其餘空白字符都將受到保護。這個值須要IE6+或者 !DOCTYPE 聲明爲 standards-compliant mode 支持。若是 !DOCTYPE 聲明沒有指定爲 standards-compliant mode ，此屬性可使用，可是不會發生做用。結果等同於 normal 。參閱 pre 對象  
nowrap   : 強制在同一行內顯示全部文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性  
說明： 
設置或檢索對象內空格字符的處理方式。 
空格字符，像換行，空格，TAB，在HTML文檔中默認的是被忽略的。當此屬性設置爲 normal 或者 nowrap 時，你可使用不換行空格的命名實體    來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操做的內容的影響與其對IE顯示內容的影響同樣。 
此屬性做用於塊對象。 
此屬性對於 currentStyle 對象而言是隻讀的。對於其餘對象而言是可讀寫的。 
對應的腳本特性爲 whiteSpace 。