CSS文本超出多行就隐藏并且显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

单行溢出隐藏

overflow:hidden; //文字长度超出限定宽度，则隐藏超出的内容
text-overflow:ellipsis; //规定当文本溢出时，显示省略符号来代表被修剪的文本
white-space:nowrap; //设置文字在一行显示，不能换行

//上面是一行内容的时候，当有两行的内容时候

多行溢出隐藏

overflow: hidden; //文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本
display:-webkit-box; //和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; //和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式。设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性