CSS 文本块溢出
单行
在 CSS 中，为我们提供了一个可用于文本溢出的元素，分别可以搭配white-space、overflow、text-overflow等元素进行进行来进行文本溢出的设置：
1
2
3
4
5
6
7
8
9
10
11
| <style>
.text {
width: 100px;
white-space: nowrap;
/* */
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="text">This text-overflow in index.html</p>
</body>
|
多行
可能有时候上面的需求无法满足我们的实际需要，只可以单行的显示文本，对此我们只需要加入display、-webkit-line-clamp、-webkit-box-orient来进行设置多行文本的溢出效果，主要通过-webkit-line-clamp来设置一个夹子，然后通过-webkit-box-orient中在盒子模型内的右侧设置一个垂直的效果即可实现：
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
.text {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<p class="text">This text-overflow in index.html</p>
</body>
|
