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; }
两行超出隐藏方法可以在一些对排版要求较高的场景中得到应用,比如文章列表、商品列表等。通过设置合适的行数,使得元素的布局更加美观,也更加符合人们的阅读习惯。
粉丝
0
关注
0
收藏
0