我正在使用多行截断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;
提前感谢您的帮助
答案 0 :(得分:0)
您可以在这篇文章中找到解决方案:
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中有一个示例,您可以在其中看到结果: