[分享]css两行超出隐藏

CSS中的overflow属性可以控制元素内容的溢出效果，其中overflow: hidden;可以隐藏元素超出部分，常见用法是隐藏文本溢出部分。但有时候我们希望只隐藏超出一定行数的部分，这时可以使用...

CSS中的overflow属性可以控制元素内容的溢出效果，其中overflow: hidden;可以隐藏元素超出部分，常见用法是隐藏文本溢出部分。但有时候我们希望只隐藏超出一定行数的部分，这时可以使用CSS3中的两行超出隐藏。

具体实现方法是利用display: -webkit-box; 和 -webkit-line-clamp: 2;来设置元素的显示方式和行数。其中-webkit-line-clamp指定元素显示的最大行数，这里设置为2，即只显示两行内容。同时，将overflow属性设置为hidden即可完美实现两行超出隐藏。

.demo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
} 

两行超出隐藏方法可以在一些对排版要求较高的场景中得到应用，比如文章列表、商品列表等。通过设置合适的行数，使得元素的布局更加美观，也更加符合人们的阅读习惯。