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: 0;
        bottom: 0;
        background-color: $bgColor;
    }
    &:after {
        content: '';
        position: absolute;
        right: 0;
        width: 1em;
        height: 1em;
        margin-top: 0.5em;
        background: $bgColor;
    }
}

 

簡單解釋一下，

lineHeight 就是一行的高度，便於計算高度

lineCount 須要幾行省略

bgColor 背景顏色

就是巧妙的運用了高度的原理，在沒有達到高度的時候顯示的是 after，當超出高度的時候顯示before 。