複数行切り捨てでChromeで '...'が表示されない

Question

私は複数行切り捨てのsass mixinを使用しています。それはクロムに '...'を表示しません。デバッグ中に私は-webkit-box-orientを得ました：垂直;適用されません。以下は

コードです：あなたはこの記事で解決策を見つけることができますヘルプ

Answer 1

を事前に

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; 

ありがとう：

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