文本溢出单行&多行溢出显示省略号
# 单行溢出
单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分<div class="ellipsis">
单行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
<style>
.ellipsis{
width: 100px;
display: block; // 必须为块级样式
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 文本溢出显示省略号
white-space: nowrap; // 文本不会换行
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 多行溢出
多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
<div class="mult_line_ellipsis">
多行文本css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分css溢出部分
</div>
<style>
.mult_line_ellipsis{
width: 100px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
上次更新: 2023/09/22, 16:54:32