解决英文或数字在HTMl网页中不自动换行。

对于网页设计的新手而言，在接触一段时间的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