-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
@mixin line2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
效果
