CSS控制表格的单元格超出部分显示省略号

KateCateCake

于 2020-03-18 19:23:17 发布

阅读量811

点赞数 1

分类专栏： css

原文链接：https://blog.youkuaiyun.com/lpch0825/article/details/79332121

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS的table-layout属性设置表格布局算法为fixed，配合td的宽度百分比、word-break、white-space、overflow和text-overflow属性，实现表格宽度固定且内容过长时自动隐藏并显示省略号的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只有定义了表格的布局算法为fixed，下面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宽高固定，内容长度过长自动隐藏并显示省略号。

————————————————
版权声明：本文为优快云博主「lpch0825」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/lpch0825/article/details/79332121