CSS文本省略
1. html结构
<div class="box">
我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔我是这个靓仔
</div>
1.1 效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d32ea25f56745fa7e0c38dd3629bbdf2.png)
2. 一行文本省略
.box {
width: 200px;
height: 100px;
border: 1px solid red;
margin: 100px auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2.1 一行文本省略效果
2.1.1 强制转换成一行的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/69ff0f71f904e7a39c32d4d771e7fc1a.png)
2.1.2 去除超出盒子的文本的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b02bb4721018c76195787cf2acbd8351.png)
2.1.3 省略超出盒子的文本的效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/818eaef17a74816413fadf1ab47f0195.png)
3. 多行省略文本
.box {
width: 200px;
height: 40px;
border: 1px solid red;
overflow: hidden;
margin: 100px auto;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
3.1 多行文本省略效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6fa92327ce3771cb46c71a8568d4130.png)
4. 注意
- 在多行文本省略中,其实下面还是有文本的,只是使用overflow:hidden将其隔掉
- 不使用overflow:hidden时的多行文本省略效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3b9f76e4d3d4ae1c1950b1c5bf1a0c3a.png)