开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
前言：
成功没有捷径但成长有路径
css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下
每天梳理一个场景，知识点查漏补缺，充实满足。
正文
背景
针对文本溢出的交互方案，UI会有各种各样的设计，万变不离其宗，无外乎这么几种，单行省略，多行省略，还需要考虑特殊情况，全是字母全是数字的情况，固定宽度的省略，不固定宽度的省略号，按照字数超出显示省略号，中间省略，带展开收起的多行省略。
基础
本篇文章首先来讲基础的省略号展示，单行省略，多行省略
了解基础属性
有几个基础属性是必须要了解的
| 属性 | 说明 | 值 |
|---|---|---|
| white-space | 用来设置如何处理元素中的空白 | normal 默认nowrap 强制文本内不换行 |
| overflow | 是overflow-x和overflow-y的简 写属性，定义了元素溢出时执行 的处理方式 | visible 默认值。内容不会被修剪，会呈现在元 素框之外 hidden 内容会被修剪,并且其余内容不可见scroll 内容会被修剪，浏览器会显示滚动条以便查看其余内容 auto由浏览器定夺,如果内容被修剪,就会显示滚动条inherit规定从父元素继承overflow属性的值 |
| text-overflow | 溢出发生时，隐藏内容怎么展示。 (需要在overflow和white-space 定义了之后） 它可以修剪，显示一个省略号 （＇…＇）或显示一个自定义字符串。 | clip默认值,保持截断ellipsis 显示省略号代替溢出内容 |
实现
单行省略
width:300px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;//文本不换行
多行省略
- -webkit-line-clamp限制文本行数
- 同时必须要使用的其他属性：
- display:-webkit-box;-webkit-box-orient,text-overflow
// overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
word-break:break-all;
不生效原因：
默认编译的时候，会过滤
-webkit-box-orient:vertical;
改变方式：
关闭autoprefixer然后再开启：用注释就可以做到
/* autoprefixer:off */
-webkit-box-orient:vertical;
/* autoprefixer:on */
或者把-webkit-box-orient:vertical;放style里加
展示
在省略以后，展示全部文字的交互选择展示，有多种方式可以参考。
写气泡提示或者, html的title显示全量, div标签,a标签
