html代码
1 | <div class="figcaption"><p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p></div> |
css代码
1 | /*注意!父标签的的高度 = p标签的高度 * p的行数*/ |
jquery
1 | $(".figcaption").each(function(i){ |
下面是做过不兼容的写法
-webkit-line-clamp
Webkit支持一个名为-webkit-line-clamp的属性,他其实是一个WebKit-Specific Unsupported Property,也就是说这个属性并不是标准的一部分,可能是Webkit内部使用的,或者被弃用的属性。但是既然被人发现了,而且能用。1
2
3
4
5
6
7p{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}