對(duì)于網(wǎng)頁設(shè)計(jì)的新手而言，在接觸一段時(shí)間的HTML/CSS后，一定會(huì)遇到這樣的問題：對(duì)于已經(jīng)定義了寬度的容器（如DIV，TD，段落等）如果里面出現(xiàn)了較長的英文或數(shù)字，則內(nèi)容不能自動(dòng)換行然后會(huì)將框架撐出設(shè)定的寬度。

比如編寫如下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>

　　

?

得到的結(jié)果卻是這樣，因?yàn)閮?nèi)容沒有自動(dòng)換行，所以框被撐得很寬。定義的400px的寬度，但現(xiàn)在表格已經(jīng)被撐大到940px了。

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

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

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

?

?

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

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

其實(shí)這種問題很簡單，只需要定義一個(gè)屬性就行了。

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

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

或

word-break:break-all;

?

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

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

如果是新手?？梢詤⒖嘉蚁旅鎸懗鰜淼睦觼硖子?。

<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>

?

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

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

?

?

-BY:Colin

尊重他人勞動(dòng)成果，轉(zhuǎn)載請注明作者及出處，謝謝合作。

轉(zhuǎn)載于:https://www.cnblogs.com/colinliu/p/3250491.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。