CSS实现文本超出隐藏显示省略号

yiyiyiyi_

于 2020-07-19 20:25:17 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/qiqiyiyi_/article/details/107450672

版权

本文详细介绍使用CSS实现文本超出自动隐藏并显示省略号的方法，包括单行和多行文本的处理，以及在table表格单元格中的应用。通过设置white-space、overflow、text-overflow等属性，可以优雅地控制文本的显示效果。

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

div{
   white-space:nowrap;
}

div{
   word-break:break-all;
}

div{
   width:200px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

div{
   display:-webkit-box;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
}

table{
   table-layout:fixed;
}
table tr td{
   width:60%;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}