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一个出来