css超出显示...

wang_xiaojie

已于 2022-09-27 10:28:41 修改

阅读量5.5w

点赞数 6

文章标签： css

于 2022-04-11 10:12:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50304773/article/details/124092567

版权

本文介绍了CSS中实现单行和多行文本超出隐藏并显示省略号的方法。对于单行文本，可以使用`overflow:hidden`配合`text-overflow:ellipsis`和`white-space:nowrap`来实现。而对于多行文本，利用`-webkit-line-clamp`和`-webkit-box`属性可以限制显示的行数。

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

css超出显示…

必须指定一个宽度

单行

overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap;  // 默认不换行；

多行

overflow: hidden; //超出的文本隐藏
display: -webkit-box;
-webkit-line-clamp: 2; // 超出多少行
-webkit-box-orient: vertical;