// 单行显示省略号
.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;
}
css文本溢出显示省略号
最新推荐文章于 2024-03-28 14:59:10 发布