CSS实现文字溢出就用省略号代替

最新推荐文章于 2024-08-03 20:42:48 发布

流川命

最新推荐文章于 2024-08-03 20:42:48 发布

阅读量232

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40685439/article/details/116062932

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这篇博客探讨了CSS中的`overflow:hidden`、`text-overflow:ellipsis`和`-webkit-line-clamp`属性如何协同工作，实现当文本内容超过三行时显示省略号的效果。通过调整`-webkit-line-clamp`的数值，可以轻松控制显示的文本行数，是前端开发中优化长文本显示的一个实用技巧。

摘要由CSDN通过智能技术生成

 overflow: hidden;
 text-overflow: ellipsis;
 display:-webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 注意：此处是第三行溢出就用省略号代替，如果要改变行数的话，
 修改 -webkit-line-clamp的数值就可以了。