CSS 文字超过 2 行后，用省略号显示

niuzheny

于 2020-11-14 15:27:55 发布

阅读量233

点赞数 3

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44191920/article/details/109691563

版权

这篇博客介绍了如何使用CSS来实现当文字超过两行时显示省略号的效果，主要涉及的关键技术包括`-webkit-line-clamp`、`overflow`、`text-overflow`和`display`属性的使用。通过这些样式设置，可以优雅地限制多行文本的显示并添加省略号。

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

CSS 文字超过 2 行后，用省略号显示

开头和结尾两行注释都要加

/*! autoprefixer: ignore next */

-webkit-box-orient: vertical; // 避免压缩后删除此行
-webkit-line-clamp: 2; // 显示省略号行数
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;

/*! autoprefixer: ignore next */

**CSS 文字超过 2 行后，用省略号显示**

CSS 文字超过 2 行后，用省略号显示