css文本显示省略号
// 单行显示省略号
.text-ellipsis {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 超过多行显示省略号
.text-webkit-box {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
// 允许在单词内换行
word-wrap: break-word;
overflow: hidden;
}
// 超过2行显示省略号
.text-two-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
// 允许在单词内换行
word-wrap: break-word;
overflow: hidden;
-webkit-line-clamp: 2;
}
// 超过3行显示省略号
.text-three-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
// 允许在单词内换行
word-wrap: break-word;
overflow: hidden;
-webkit-line-clamp: 3;
}
如果使用sass,可以把.text-webkit-box替换为@extend .text-webkit-box
// 单行显示省略号
.text-ellipsis {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 超过多行显示省略号
.text-webkit-box {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
// 允许在单词内换行
word-wrap: break-word;
overflow: hidden;
}
// 超过2行显示省略号
.text-two-line-ellipsis {
@extend .text-webkit-box;
-webkit-line-clamp: 2;
}
// 超过3行显示省略号
.text-three-line-ellipsis {
@extend .text-webkit-box;
-webkit-line-clamp: 3;
}