css两行超出隐藏

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 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;
} 

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行超出隐藏

粉丝

0

关注

0

收藏

0

已有0次打赏