應用CSS代碼來讓英文和連續數字實現自動換行關於自動換行，如果說是正常字符換行是比較容易的，那麼連續數字和英文字符會把容器撐大，讓人頭疼，接下來長沙同文來和你講一講CSS是如何換行的？ 像div,p等塊級元素 ，正常文字的換行(亞洲文字和非亞洲文字)元素都是自動設定的white-space:normal,當定義了寬度之後就會自動實現換行：
<div id="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;} <div id="wrap">長沙網站優化首選</div> 目的實現可以換行
2.(Firefox瀏覽器)連續的阿拉伯數字和英文字符斷行，Firefox的所有版本都沒能解決這個問題，所以超出邊界的字符將會被隱藏或給容器加滾動條
#wrap{word-break:break-all; width:200px; overflow:auto;} <div id="wrap">長沙網站優化首選</div> 最終結果是內容隱藏，容器正常。
對於table 1. (IE瀏覽器)使用table-layout:fixed;強制table的寬度，多餘內容會被隱藏起來<table style="table-layout:fixed" width="200"><tr><td>網站建設</td></tr></table> 效果：隱藏多餘內容
2. (IE瀏覽器)在td,th中嵌套div,p等採用上面提到的div,p的換行方法
3.(IE瀏覽器)使用table-layout:fixed;強制table的寬度，內層td,th採用word-break ： break-all;或者word-wrap ： break-word ；換行<table width="200" style="table-layout:fixed;"><tr><td width="25%" style="word-break ： break-all; ">網站優化首選</td><td style="word-wrap ： break-word ；">長沙網站優化首選</td></tr></table> 可以看到最終結果是可以換行
4.(Firefox瀏覽器)在td,th中嵌套div,p等採用上面提到的對付Firefox的方法運行代碼框。最後，出現這種現象的概率很小。
5.(Firefox瀏覽器)使用table-layout:fixed;強制table的寬度，內層td,th採用word-break ： break-all;或者word-wrap ： break-word ；換行，使用overflow:hidden;隱藏超出內容，這裡overflow:auto;無法起作用<table style="table-layout:fixed" width="200"><tr><td width="25%" style="word-break ： break-all; overflow:hidden;">網站建設>網站製作>網站優化</td><td width="75%" style="word-wrap ： break-word; overflow:hidden; ">網站建設</td></tr></table> 最後得到的結果是隱藏多於內容。