怎么用css实现多行文本省略？

2020-07-08 265 阅读1分钟

效果图

解决方案

<div class="demo">
  CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号CSS实现多行文本溢出显示省略号
</div>

.demo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  width: 200px;
  border: 1px solid #ccc;
}

1.-webkit-box-orient: vertical：指定子元素按垂直方向排列。

2.-webkit-line-clamp: 3：可以限制块元素中文本的显示行数。这里显示3行。

3.适用范围：该方法适用于Webkit浏览器及移动端。

示例代码下载

可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。