当容器高度小于于内容高度。 div{width:300px;height:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} 后记 截断文本的方式有很多,line-clamp胜在可以指定行数。
line-clamp属性可以限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他外来的WebKit属性,添加-WebKit-前缀。 line-clamp属性是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS规范草案中,是一个正在编辑的草案。所以这就意味着line-clamp属性不是一成不变的,因为它是一项正在进行中...
先从最简单的line-clamp开始吧。 最简单的多行省略,line-clamp 通过CSS 属性-webkit-line-clamp可以把块容器中的内容限制为指定的行数 .ellipsis{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} 属性的-webkit前缀告诉我们事情似乎并不简单。是的,它只支持基于webkit内核...
-webkit-line-clamp:2; -webkit-box-orient: vertical; display: -webkit-box; 参考链接MDN -webkit-line-clamp 作者描述?Line Clampin’ (Truncating Multiple Line Text) 在去掉white-space属性后添加查到得CSS样式,就能得到上述效果,网上给的答案大概是这个意思... 当然,如果是这么一帆风顺也就没有今天的文章...
-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元...
通过line-clamp 来限制行数 (限制高度) 加上 display: -webkit-box 和 box-orient, overflow-y 就可以了. 它完全是另一套组合拳丫. 虽然现在 model browser 都支持了, 但是一定要加上 -webkit prefix 哦. 当遇上 text-align: center 莫名其妙多了一个 horizontal scrollbar... ...
-webkit-line-clamp:2; -webkit-box-orient: vertical; display: -webkit-box; 参考链接MDN -webkit-line-clamp 作者描述?Line Clampin’ (Truncating Multiple Line Text) 在去掉white-space属性后添加查到得CSS样式,就能得到上述效果,网上给的答案大概是这个意思... 当然...
51CTO博客已为您找到关于css line-clamp的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及css line-clamp问答内容。更多css line-clamp相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
line-clamp-1overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; line-clamp-2overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; line-clamp-3overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3...
Line-clampdoi:US1363002 ALueckenbach, Anton TUS