标签：
最近项目中出现多行省略显示~
之前我只知道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的样式已设好了~
标签：
原文地址：http://www.cnblogs.com/xyf993/p/5549663.html
