多行溢出省略号

最近项目中出现多行省略显示~

之前我只知道text-overflow:ellipsis~但是结果它只能对一行文字有用

然后各种看 各种查 总结一下

1.如果你只用care   webkit内核浏览器~那么~直接

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;（你要限定的行数）

这是最最最~简单~并且能满足 自适应  ，即超出高度才用省略号，没超出正常显示。

2.但是还有一堆不支持的浏览器

p {

　　line-height: 1em;

　　height: 5em;  （注意这个方法 line-height和height的设置  最好用em）

　　overflow: hidden;

　　position: absolute;

}

p:after {

　　position:relative;

　　right:0;

　　bottom:0;

　　content:‘...‘

。。。此处还需要补充背景白色，搞快，块状显示等

}

这个方法就是直接用省略号来覆盖住最后的文字，如果不支持after就用一个标签代替

但是！这个方法太死板了~ 如果内容没有超过限定高度，也有个省略号?? = = 太诡异了吧，如果你能保证你的内容都

是一板一板的，那就用这个吧 ，简单快捷。

要是不满足呢……所以肯定会想到用JS来判断一下 = =  哎 好麻烦

3.那么推荐你直接用JS插件  jquery的 dotdotdot.js;

引入后直接

$(‘p‘).dotdotdot();  //p的样式已设好了~