文字溢出省略号
单行文字溢出
这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字
<p class="long-text">这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字</p>
1
.long-text {
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
1
2
3
4
5
6
2
3
4
5
6
多行文字溢出
这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字
<p class="mul-long-text">这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字，这是一段长文字</p>
1
.mul-long-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
text-overflow:ellipsis;
overflow: hidden;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8