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

本文分解用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: '...';
}
}

你学费了吗?

相关阅读

本文位置:文案姐 » 用CSS 实现文本的单行和多行溢出省略效果
免责声明:本站资源仅供个人学习交流,如本文侵犯了您的权益,请联系我们删除!