文字在一行或两行时超出显示省略号
一行超出显示省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
1
2
3
<html>
<div class="box-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
.box-42b6{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
两行（多行）超出显示省略号
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5
6
显示的行数由line-clamp样式的值决定。
<html>
<div class="box2-42b6">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
.box2-42b6{
border: 1px solid #999;
width: 200px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
pyorz's blog