一、单行
实现单行文本的溢出显示省略号使用text-overflow:ellipsis属性，但需要配合使用overflow: hidden; white-space: nowrap这两个属性使用才能达到效果。
注意：
- 这里如果用了flex布局的话，text-overflow:ellipsis将会失效；
- 还有一个问题就是，关于 display:inline 和 display:hidden 一起使用 display:hideen 会失效的问题，因为display:inline,会让元素的宽度/高度失效,标签中有多少内容,标签就是多宽.所以当要将元素变为行内元素又要隐藏超出部分的内容时，可以用 display:inline-block 代替 display:inline；
- 再一个就是，display:inline-block 加上 overflow:hidden 会导致元素塌陷，解决办法有两种，1.浮动，然后清除浮动；2.给加了display属性的元素加vertical-align:bottom（个人推荐使用），或者vertical-align:top
如下：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果：
二、多行
不考虑兼容性，适用于Webkit浏览器内核
css代码：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-clamp:3 //截取第三行
overflow:hidden;
效果：
