css实现超出文本溢出用省略号代替

一、单行

实现单行文本的溢出显示省略号使用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;

效果：