對于網頁設計的新手而言，在接觸一段時間的HTML/CSS后，一定會遇到這樣的問題：對于已經定義了寬度的容器（如DIV，TD，段落等）如果里面出現了較長的英文或數字，則內容不能自動換行然后會將框架撐出設定的寬度。

比如編寫如下HTML后：

<table width="400px" border="1px solid;"> <tr> <td width="20%">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</td> <td width="30%">12345567899123455678991234556789912345567899</td> <td width="50%">testtesttest@test.com</td> </tr> </table>

　　

?

得到的結果卻是這樣，因為內容沒有自動換行，所以框被撐得很寬。定義的400px的寬度，但現在表格已經被撐大到940px了。

沒看懂？再舉一個例子，下面是兩段定義了寬度的段落：

<p style="width:200px;">測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。測試，測試文本，我是中文。</p>

<p style="width:200px;">test,testtexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttext</p>

?

?

中文顯示效果和英文顯示效果如下（英文跟本不會換行，所以定義了寬度無效）：

---------------------------------------------------------------------------------

其實這種問題很簡單，只需要定義一個屬性就行了。

解決方法（定義如下屬性）：

word-wrap : break-word ;（推薦用第一種）

或

word-break:break-all;

?

至此，了解CSS的朋友應該看到屬性后就能夠馬上搞定問題了。

------------------------------------------------------------------------------------

如果是新手。可以參考我下面寫出來的例子來套用。

<style type=”text/css”> #en_newline{word-break:break-all;} </style> <table width="500px" border="1px solid;"> <tr> <td width="50%" id="en_newline">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</td> <td width="30%" id="en_newline">12345567899123455678991234556789912345567899</td> <td width="20%" id="en_newline">testtesttest@test.com</td> </tr> </table>

?

對于段落也是一樣的（也可以直接使用）。

<p style="width:200px;word-wrap : break-word ;">test,testtexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttexttesttext</p>

?

?

-BY:Colin

尊重他人勞動成果，轉載請注明作者及出處，謝謝合作。

轉載于:https://www.cnblogs.com/colinliu/p/3250491.html

總結

以上是生活随笔為你收集整理的解决英文或数字在HTMl网页中不自动换行。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。