css如何只显示两行，并且在第二行最后添加省略号

青铜级前端

于 2020-06-11 15:58:22 发布

阅读量1.7k

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wangcongcsdn/article/details/106690740

版权

1 篇文章

订阅专栏

本文介绍了一种使用CSS实现的文本显示效果：当文本超过两行时，自动添加省略号，确保页面布局整洁。关键CSS属性包括overflow、text-overflow、display、-webkit-line-clamp和-webkit-box-orient。

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

css如何只显示两行，并且在第二行最后添加省略号

overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

效果图