设置多行省略号-webkit-line-clamp

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

ellipsisL($lines) {
    letter-spacing: 0;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: $lines; /* 要显示的行数 */
    -webkit-box-orient: vertical;
}