多行截断在 Chrome 中不显示“...”
Multiline Truncation doesn't show '...' in Chrome
我正在使用多行截断 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;
在此先感谢您的帮助
您可以在此post找到解决方案:
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 中有一个示例,您可以在其中查看结果:
我正在使用多行截断 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;
在此先感谢您的帮助
您可以在此post找到解决方案:
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 中有一个示例,您可以在其中查看结果: