크롬에서 여러 줄 잘라 내기에 '...'이 표시되지 않습니다.

Question

여러 줄 잘라 내기 믹스 믹스를 사용하고 있습니다. 그것은 크롬에 '...'을 표시하지 않습니다. 디버깅하는 동안 나는 -webkit-box-orient을 얻었다 : 수직; 적용되지 않습니다. 다음은

코드입니다 : 도움에 미리

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