案例
CSS代码:
.box {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
HTML代码:
<div class="box">
多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出 多行文字溢出
</div>
效果:
解释
-webkit-line-clamp
限制在一个块元素显示的文本的行数。 为了实现该效果,需要组合其他的WebKit属性。
提示:
-webkit-line-clamp
是webkit的私有属性,是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
组合属性:display
display: -webkit-box;
必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
组合属性:-webkit-box-orient
-webkit-box-orient: vertical;
必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
参考:
https://blog.csdn.net/anwj1020/article/details/93481799
https://www.imangodoc.com/171760.html