关于table的换行和超出省略

给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>


猜你喜欢

转载自blog.csdn.net/yilia_jia/article/details/80816611