文本超出内容区域后用三个省略号代替

1.固定宽高的

当div的宽高被固定了， 我们只需要给它加三个属性： overflow:hidden   （超出部分隐藏）

white-space:nowrap    （强制不换行）

text-overflow:ellipsis     （用三个省略号代替）

上面这种方法没有兼容性问题，但是有局限性，就是文本只能有一行，要是遇到下面这种情况怎么做呢？

就需要用到下面这种办法了

2.不固定宽高的

我们需要给div设置4个属性： display:-webkit-box     （box-flex布局）

-webkit-box-origin:vertical     （垂直排列子元素）

-webkit-line-clamp;n  (n>0)     （显示几行）

overflow:hidden                   （超出部分隐藏）

这种方法可以实现上面那种效果，不过有兼容性问题。