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

最新推荐文章于 2023-01-05 10:30:42 发布

lpch0825

最新推荐文章于 2023-01-05 10:30:42 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： css table溢出显示省略号

本文链接：https://blog.csdn.net/lpch0825/article/details/79332121

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

 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宽高固定，内容长度过长自动隐藏并显示省略号，效果如下：