1.单行文本溢出隐藏显示省略号
```
div{
white-space: nowrap; /*强制文本一行显示*/
overflow: hidden; /*超出元素默认宽度内容隐藏*/
text-overflow: ellipsis; /*内容超出以省略号显示*/
}
```
2.基于webkit多行文本溢出省略号
```
div{
display: -webkit-box; /*将对象转换为弹性伸缩盒子显示*/
-webkit-box-orient: vertical; /*设置伸缩盒子对象内的子对象的排列方式*/
-webkit-line-clamp: 3; /*用该属性来限定块元素内文本显示的行数*/
overflow: hidden; /*内容超出隐藏*/
text-overflow: ellipsis; /*内容超出以省略号显示*/
}
```
3.通用多行文本溢出省略号
```
div{
height: 30px;
line-height: 60px;
overflow: hidden;
position: relative;
}
div::after{
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0 8px 0 8px;
background: #fff; /*设置背景盖住文字*/
}
```
