如何实现文本显示两行，超过部分用省略号隐藏？

最新推荐文章于 2024-07-31 17:04:01 发布

流川962

最新推荐文章于 2024-07-31 17:04:01 发布

阅读量217

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_56769697/article/details/130373839

版权

文章讲述了如何使用CSS的overflow:hidden,text-overflow:ellipsis,display:-webkit-box,-webkit-line-clamp等属性组合，来实现当文本内容超过两行时，隐藏多余的部分并显示省略号的效果。这种方法常用于网页设计中对文本内容的展示限制。

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

如何实现文本显示两行，超过部分用省略号隐藏？

思路：

overflow：hidden；//超出盒子隐藏
text-overflow:ellipsis；//文本溢出时，显示省略标记（.......）。
display：-webkit-box;  //将对象作为弹性伸缩盒子显示。
-webkit-box-orient:vertical;  //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）。
-webkit-line-clamp:2;   //这个属性不是css的规范属性，需要组合上上面两个属性，表示显示的行数。