用CSS 实现文本的单行和多行溢出省略效果

本文分解用CSS 实现文本的单行和多行溢出省略效果

css源码：

//1:单行文本溢出
.textTruncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

//2:按行数-多行文本溢出(兼容性不好)
.mulLineTruncate {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
//3:按高度-多行文本溢出(没有省略号)
.mulLineTruncate {
max-height: 40px;
overflow: hidden;
line-height: 20px;
}
//4:解决3方案没有省略号的情况
.mulLineTruncate {
position: relative;
max-height: 40px;
overflow: hidden;
line-height: 20px;
&::after {
position: absolute;
right: 0;
bottom: 0;
padding: 0 20px 0 10px;
content: '...';
}
}

你学费了吗？