1. 单行文本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
1> text-overflow
用来定义文本超出容器时的展示。
| 值 | 解释 |
|---|---|
| clip | 直接截断 |
| ellipsis | 省略号展示（...） |
| string | 自定义文本（官方并不推荐，此方式只是实验阶段。本人尝试的时候发现有兼容性问题） |
2> white-space
定义如何处理元素中的空白。
| 值 | 换行符 | 空格和制表符 | 文字转行 |
|---|---|---|---|
| normal | 合并 | 合并 | 转行 |
| nowrap | 合并 | 合并 | 不转行 |
| pre | 保留 | 保留 | 不转行 |
| pre-wrap | 保留 | 保留 | 转行 |
| pre-line | 保留 | 合并 | 转行 |
| break-spaces | 保留 | 保留 | 转行 |
2. 多行文本
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
网友评论