CSS实现多行文本超出省略效果

在WebKit浏览器或移动端的页面中实现，可以直接使用WebKit的CSS扩展属性-webkit-line-clamp；

注意：这是一个不规范的属性，它没有出现在CSS规范草案中。

　　-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性：

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis;可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

.multi-line {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

效果图

欢迎关注

掘金：juejin.cn/user/415657…

Github：github.com/zhubingran

CSDN：blog.csdn.net/qq_43118757

QQ：1330022055