文字溢出省略号

单行文字溢出

这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字

<p class="long-text">这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字,这是一段长文字</p>
1
.long-text {
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
1
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