对于网页设计的新手而言，在接触一段时间的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>
尊重他人劳动成果，转载请注明作者及出处，谢谢合作。