文本溢出处理
1. 单行文本溢出显示省略号
overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）
white-space: nowrap; （设置文字在一行显示不能换行）
text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
2. 多行文本溢出显示省略号
方法一（css）
-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ） -webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）方法二（js）
数据获取时：预估字符，过长后截取字符串并手动加上“...” slice()、substring()、substr()都有截取字符串的作用 （1）str.substring(indexStart, [indexEnd]) 注：substring()从提取的字符indexStart可达但不包括 indexEnd 如果indexStart 等于indexEnd，substring()返回一个空字符串。 如果indexEnd省略，则将substring()字符提取到字符串的末尾。 如果任一参数小于0或是NaN，它被视为为0。 如果任何一个参数都大于stringName.length，则被视为是stringName.length。 如果indexStart大于indexEnd，那么效果substring()就好像这两个论点被交换了一样； 例如 str.substring(1, 0) == str.substring(0, 1) （2）str.substr(start, [length]) 注：substr()会从start获取长度为length字符（如果截取到字符串的末尾，则会停止截取）。 如果start是正的并且大于或等于字符串的长度，则substr()返回一个空字符串。 若start为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从0开截取）。 如果length为0或为负数，substr()返回一个空字符串。如果length省略，则将substr()字符提取到字符串的末尾。 （3）str.slice(beginIndex[, endIndex]) 注：若beginIndex为负数,则将该值加上字符串长度后再进行计算（如果加上字符串的长度后还是负数，则从0开始截取）。 如果beginIndex大于或等于字符串的长度，则slice()返回一个空字符串。 如果endIndex省略，则将slice()字符提取到字符串的末尾。如果为负，它被视为strLength + endIndex其中strLength是字符串的长度。
坑点
- 设置display: -webkit-box;后文本属性部分失效 例如： text-align: center
webkit-box属性
-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis |
inherit，其中默认值是inline-axis，即横向排列
-webkit-box-flex 子元素之间比例，仅作一个系数
-webkit-box-direction 子元素排列顺序 normal | reverse | inherit，其中默认值是normal
-webkit-box-flex-group 以组为单位的流体系数
-webkit-box-ordinal-group 以组为单位的子元素排列方向
-webkit-box-lines 子元素是否换行，类似word-wrap和word-break的作用
-webkit-box-align 子元素垂直方向的对其方式
-webkit-box-pack 子元素水平方向的对其方式
