css多行省略

单行省略就不用说了，用css实现非常简单，兼容性还非常好。但是多行省略一直都是前端的痛点，在css3之前，可以用js去算两行能放多少个字，把多余的字用 。。。 代替，且不说好不好，万一哪天PM说要改成3行，UI说这个字体改大一点，又得去算一遍，可谓是苦不堪言。

好在有css3，css3提供了实现完美的多行省略方法，本文已scss为例

@mixin ellipsis($lineCount: 2) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lineCount;
    line-clamp: $lineCount;
    -webkit-box-orient: vertical;
}

咋们想要几行省略的时候直接调用这个方法，传入行数，就能完美实现，不需要去计算。

但是，但是，，兼容性一直是个问题啊，可以看出，必须要加上前缀才能生效，就不说IE了，就连低端的Android手机都不兼容，真是头疼。。。

难道就没有别的办法了吗？

no！！css 是博大精深的，尤其是预编译css工具更强大，例如下面就是 scss的写法，其他less，sass类似

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white) {
    overflow: hidden;
    position: relative;
    line-height: $lineHeight;
    max-height: $lineHeight * $lineCount;
    text-align: justify;
    &:before {
        content: '...';
        width: 1em;
        position: absolute;
        right:;
        bottom:;
        background-color: $bgColor;
    }
    &:after {
        content: '';
        position: absolute;
        right:;
        width: 1em;
        height: 1em;
        margin-top: 0.5em;
        background: $bgColor;
    }
}

简单解释一下，

lineHeight 就是一行的高度，便于计算高度

lineCount 需要几行省略

bgColor 背景颜色

就是巧妙的运用了高度的原理，在没有达到高度的时候显示的是 after，当超出高度的时候显示before 。

补充js实现多行文本溢出

const p = document.querySelector('p')
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
while (p.scrollHeight > p.clientHeight) {
  words.pop()
  p.innerHTML = words.join('') + '...'
}

<p>这是一段测试文字，this is some test text，测试文字，测试文字测 </p>

使用split + 正则表达式将单词与单个文字切割出来存入words

加上 '...'

判断scrollHeight与clientHeight，超出的话就从words中pop一个出来