Open sisterAn opened 3 years ago
单行:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行(3行)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
//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: '...';
}
}
.one-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.more-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
//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: '...'; } }
方案3,如果最后一行字数未达到应该省略显示的条件(例如最后一行只有1个字符),也会显示省略号。并不是很理想的效果
单行文本
overflow: hidden
(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap
(设置文字在一行显示,不能换行)text-overflow: ellipsis
(规定当文本溢出时,显示省略符号来代表被修剪的文本)多行文本(css)
-webkit-line-clamp: 2
(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)display: -webkit-box
(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )-webkit-box-orient: vertical
(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )overflow: hidden
(文本溢出限定的宽度就隐藏内容)text-overflow: ellipsis
(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)多行文本(js)