用css控制table文字溢出显示省略号控制td显示字数

最新推荐文章于 2025-02-07 18:01:02 发布

原创最新推荐文章于 2025-02-07 18:01:02 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #table溢出 #显示省略号

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种利用CSS实现固定宽度表格布局的方法，并确保当内容长度超过设定宽度时能够自动隐藏多余内容并显示省略号。通过设置table和td元素的样式属性来达到这一效果。

部署运行你感兴趣的模型镜像

 table{  
        width:100px;  
        table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */  
    }  
    td{  
        width:100%;  
        word-break:keep-all;/* 不换行 */  
        white-space:nowrap;/* 不换行 */  
        overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
        text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/  
    }

添加样式让table宽高固定，内容长度过长自动隐藏并显示省略号，效果如下：