本文向大家介紹一下如何實現CSS自動換行，主要從div,p等塊級元素和Table兩個方面來向大家描述，相信通過本文的學習你對CSS自動換行的概念有一定的認識。

CSS內容自動換行

CSS自動換行問題你是否了解？正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現CSS自動換行的方法。

對于div,p等塊級元素如何實現CSS自動換行

正常文字的換行(亞洲文字和非亞洲文字)元素擁有默認的white-space:normal,當定義的寬度之后自動換行。

html

<dividdivid="wrap">正常文字的換行(亞洲文字和非亞洲文字)  
元素擁有默認的white-space:normal,當定義</div> 

CSS

#wrap{white-space:normal;width:200px;}  
 

1.（IE瀏覽器）連續的英文字符和阿拉伯數字,使用word-wrap:break-word;或者word-break:break-all;實現強制斷行

#wrap{word-break:break-all;width:200px;}  
 

或者 

#wrap{word-wrap:break-word;width:200px;}  
 
<dividdivid="wrap">abcdefghijklmnabcdefghi
jklmnabcdefghijklmn111111111</div> 
 

 效果：可以實現CSS自動換行

2.（Firefox瀏覽器）連續的英文字符和阿拉伯數字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條 

#wrap{word-break:break-all;width:200px;overflow:auto;}  
 
<dividdivid="wrap">abcdefghijklmnabcdefghijklmn
abcdefghijklmn111111111</div> 
 

 效果：容器正常，內容隱藏

對于table如何實現CSS自動換行

1.(IE瀏覽器)使用table-layout:fixed;強制table的寬度,多余內容隱藏 

<tablestyletablestyle="table-layout:fixed"width="200"> 
<tr> 
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss  
</td> 
</tr> 
</table> 
 

效果：隱藏多余內容

2.(IE瀏覽器)使用table-layout:fixed;強制table的寬度,內層td,th采用word-break:break-all;或者word-wrap:break-word;換行 

<tablewidthtablewidth="200"style="table-layout:fixed;"> 
<tr> 
<tdwidthtdwidth="25%"style="word-break:break-all;">
abcdefghigklmnopqrstuvwxyz1234567890  
</td> 
<tdstyletdstyle="word-wrap:break-word;">
abcdefghigklmnopqrstuvwxyz1234567890  
</td> 
</tr> 
</table> 
 

效果：可以實現CSS自動換行

3.(IE瀏覽器)在td,th中嵌套div,p等采用上面提到的div,p的換行方法

4.(Firefox瀏覽器)使用table-layout:fixed;強制table的寬度,內層td,th采用word-break:break-all;或者word-wrap:break-word;換行，使用overflow:hidden;隱藏超出內容，這里overflow:auto;無法起作用 

<tablestyletablestyle="table-layout:fixed"width="200"> 
<tr> 
<tdwidthtdwidth="25%"style="word-break:break-all;  
overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td> 
<tdwidthtdwidth="75%"style="word-wrap:break-word;  
overflow:hidden;">abcdefghigklmnopqrstuvwxyz1234567890</td> 
</tr> 
</table> 
 

效果：隱藏多于內容

5.(Firefox瀏覽器)在td,th中嵌套div,p等采用上面提到的對付Firefox的方法

運行代碼框

***，這種現象出現的幾率很小，但是不能排除網友的惡搞。如果有什么問題請到我的留言本提出.

作者:greengn
作者留言本：http://www.jluvip.com/blog/gbook.asp，大家可以聯系作者交流。

【編輯推薦】

1. 解決CSS margin-top在火狐下失效問題
2. CSS Sprites圖片切割術與圖片優化
3. CSS中DIV彈出層問題解決方案
4. CSS中link和@import的區別
5. CSS分欄布局的兩種方法：絕對定位和浮動