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; /*設置背景蓋住文字*/
}
```
