CSS3-多行溢出样式设置

在开发过程中,经常碰到需要设置多行溢出时的样式,例如一个块要求文本需要在第二行溢出时显示省略号,此时就需要进行多行溢出设置.

核心:-webkit-line-clamp
此样式必须要与另外几个样式配合使用：

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow 设置文本超出之后的显示方式。

若需要设置两行文本溢出后省略号显示则

overflow: hidden; //设置超出边界隐藏
-webkit-line-clamp: 2; //设置行数
text-overflow: ellipsis; //设置文本溢出后显示省略号
display: -webkit-box; //设置弹性伸缩盒子
-webkit-box-orient: vertical; //设置伸缩盒子对象子元素垂直排列

设置后显示如下