1、设置table中的单元格内容自动换行,使用word-wrap在IE浏览器中支持,在firefox浏览器的3.5版本以上开始支持,所以为了满足浏览器兼容性,需要在table中设置table-layout:fixed。
2、word-wrap在div属性中能起到换行的作用,也可以在td中使用div,在div里面设置。
<style type="text/css">
table{border:1px red solid;height:300px; border-collapse: collapse;}
table tr td{border:1px red solid;}
</style>
<table width="600px" style="table-layout:fixed;word-wrap:break-word;" >
<tr style="background-color:#F9F7FC;">
<td style="width:120px;">全是中文有标点</td>
<td style="width:120px;">全是中文无标点</td>
<td style="width:120px;">全是英文有标点</td>
<td style="width:120px;">中文和英文</td>
<td style="width:120px;">全是英文无标点</td>
</tr>
<tr >
<td style="width:120px;">你好这是中文。你好这是中文。你好这是中文。你好这是中文。</td>
<td style="width:120px;">你好这是中文你好这是中文你好这是中文你好这是中文</td>
<td style="width:120px;">This is all English. This is all English. This is all English.</td>
<td style="width:120px;">中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.</td>
<td style="width:120px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
<br>
<div style="word-wrap:break-word;width:200px;border:1px red solid;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<br>
<div style="word-wrap:break-word;width:200px;border:1px #00FF33 solid;">中文中文中文中文中文中文中文中文中文中文中文</div