table单元格内容根据宽度自动省略

891 阅读1分钟

1.设置table

table-layout-fixed {
    table-layout: fixed;
}

2.设置column

column-cell-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: keep-all;
    }

3.实现效果

image.png

4. 1.2样式可设置在公共css样式中 此属性用法参考

以使用antDesign为例

A.如果使用antDesign4.X.X 可以直接设置

image.png

B.如果使用antDesign3.X.X 按照上述1.2两点设置样式, 若render里面return div等dom 需要额外设置overflow-ellipsis

    .overflow-ellipsis {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }

image.png