需求:将表格中td内容的换行显示
解决办法:将表格中的数据用 div标签包裹,并添加如下属性:
white-space:normal;
word-break:break-all;
word-wrap:break-word;
注意:该div需要设置指定宽度,或为td设置宽度并设置div宽度为100%
例1:
<table>
<tr>
<td>单元格1</td>
<td width="80">
<div style="width: 100%;white-space:normal;word-break:break-all;word-wrap:break-word;">单元格2单元格2单元格2单元格2单元格2单元格2</div>
</td>
<td>单元格3</td>
</tr>
</table>
例2:
<table>
<tr>
<td>单元格1</td>
<td>
<div style="width: 80;white-space:normal;word-break:break-all;word-wrap:break-word;">单元格2单元格2单元格2单元格2单元格2单元格2</div>
</td>
<td>单元格3</td>
</tr>
</table>
优化前效果:
优化后效果: