# 文本溢出截断省略
文本溢出截断省略是比较常见的业务场景，主要分为单行文本溢出截断省略与多行文本溢出截断省略，单行的截断方案比较简单，多行截断相对比较复杂。
## 单行溢出省略
单行文本溢出截断省略直接使用`CSS`即可，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是只能作为单行文本溢出截断省略的解决方案。
```html
很长很长很长很长很长很长很长很长的文本
不很长的文本
```
## 多行溢出省略
### 按行计算 CSS方案
多行文本溢出截断省略按行计算使用`CSS`，其文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是兼容性一般，`line-clamp`属性只有`WebKit`内核的浏览器才支持,多适用于移动端页面，因为移动设备浏览器更多是基于`WebKit`内核。
```html
不很长的文本
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
```
### 按行计算 Js方案
多行文本溢出截断省略按行计算使用`Js`，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但是需要`Js`实现，背离展示和行为相分离原则，文本为中英文混合时，省略号显示位置略有偏差。
```html
不很长的文本
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
```
### 按高度计算 CSS方案
多行文本溢出截断省略按高度计算使用`CSS`，利用`Float`的浮动，通过`::before`与`::after`两个伪元素实现浮动操作，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但省略号显示可能不会刚刚好，有时会遮住一半文字。
```html
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
```
## 代码示例
```html
文本溢出截断省略
不很长的文本
很长很长很长很长很长很长很长很长的文本
不很长的文本
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
不很长的文本
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
## 参考
```
https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b
```