多行截斷在Chrome中不顯示'...'

Question

我正在使用多行截斷sass mixin。它不會在Chrome中顯示「...」。在調試時，我得到了-webkit-box-orient：vertical;沒有得到應用。

下面是代碼：

overflow: hidden; 
    max-height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */ 

    display: -webkit-box; 
    -webkit-line-clamp: $lines-to-show; 
    -webkit-box-orient: vertical; 

    // Solution for Opera 
    text-overflow: -o-ellipsis-lastline; 

    font-size: $font-size; 
    line-height: $line-height; 
    text-overflow: ellipsis; 

預先感謝幫助

Answer 1

你可以找到在這個帖子的解決方案：

http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

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

有一個樣本在codepen中你可以看到結果：

http://codepen.io/natonischuk/pen/QbGWBa