给td设置宽度后 单元格内容会自动换行 但只对于文字会自动换行
注意 white-space 属性 nowrap 是不换行的 normal才是换行
如果是数字/字母的话需要另外添加两条属性
word-wrap:break-word;
word-break:break-all;
对于td单元格内容过长选择超出添加省略号的话 则在td中使用<p></p>标签:
1.使用overflow: hidden把超出的内容进行隐藏;
2.然后使用white-space: nowrap设置内容不换行;
3.最后使用text-overflow: ellipsis设置超出内容为省略号。
注意:不要将这三条属性作用在div上 没用效果
另外 p标签记得设置宽度
p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100px; }
<table> <tr> <td> <p> 文字测试文字测试文字测试文字测试文字测试文字测试 </p> </td> <td></td> <td></td> </tr> </table>