多行截断在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