CSS单行/多行文本，超出隐藏并显示省略号
方法一：使用CSS属性
单行文本溢出显示省略号
多行文本溢出显示省略号
因为使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
————————————————
使用场景： 多用于移动端页面，因为移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。
方法二：利用定位和伪类元素
适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
方法三：运用第三方插件或者自己写JS脚本控制
·clamp.js
·jQuery.dotdotdot
使用:hover选择器的content属性
演示效果：
注意：右键或其他形式保存这张图片的时候，保存的是原来src对应的图片
content属性一般用来与::before及::after伪元素配合使用，来插入生成内容；
user-select设置不能选中文本
user-select属性是css3新增的属性，用于设置用户是否能够选中文本。可用于除替换元素外的所有元素。
兼容性代码示例：
not()选择器
选中不在此范围内的元素，例如：div:not(:last-child)，选中除最后一个div的所有div元素例子：有时候在做列表时需要为每项添加下边框线，但最后一个项不需要边框线
换行文本使用 box-decoration-break
你有没有遇到过如下情况
解决这个问题可以使用box-decoration-break属性
它可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现
添加样式：
