多行文本溢出省略ellipsis...css/scss/js方法全总结

多行显示并在最后一行截断文字？

---text-overflow基本知识请看上篇文章：text-overflow: ellipsis;什么时候可能不生效？

单行文字我们为了能够截断文字，使用了

white-space: nowrap; // 强制文本在一行显示

如果我确实有多行并在最后一行截断文字显示的需求呢？怎么实现？

方法1 -Webkit-line-clamp property

优点: 最简单的方法缺点: 但是很遗憾，它不支持跨浏览器（在Firefox和Internet Explorer中不起作用）。

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果

在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.

使用方法：

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line