css实现文字超出后加省略号

先看一下实现后的样子

在文字所在的class添加下面的代码：

div{    
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

我们来一个一个的看上面的属性

text-overflow属性规定当文本溢出包含元素时发生的事情。它有三个值clip、ellipsis、string,clip就是直接把后面展示不下的字符剪切掉，ellipsis是在后面留一些空，加上'...'，string在MDN上说会有各种不同的效果，但我在谷歌浏览器上没有试出来。后面两行代码就是部分行和超过隐藏，英文text-overflow是没办法隐藏的。这个方法有一个致命缺陷，就是只能一行。那就介绍一下第二种方法了。

div {
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-line-clamp: 1; /* 控制最多显示几行 */      
    -webkit-box-orient: vertical;
}

display: -webkit-box将对象作为弹性伸缩盒子模型显示 ，-webkit-line-clamp: 1;  控制最多显示几行