实现两行文本截断并附带 ... 的效果

实现一行截断我们都已经非常熟悉了，今天看到个实现两行截断的操作，赶紧记下来

<div class="two-line-ellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

.two-line-ellipsis {
  text-overflow: ellipsis;
  color: white;
  width: 200px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
}

PS：由于用到了 webkit 的一些私有属性，所以要注意浏览器的兼容问题。

实现两行文本截断并附带 ... 的效果

原文：https://www.cnblogs.com/yinyuxing/p/15236743.html