轉(zhuǎn)自：http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html
1
-webkit-line-clamp
Webkit支持一個(gè)名為-webkit-line-clamp的屬性，他其實(shí)是一個(gè)WebKit-Specific Unsupported Property，也就是說(shuō)這個(gè)屬性并不是標(biāo)準(zhǔn)的一部分饥侵，可能是Webkit內(nèi)部使用的盏阶，或者被棄用的屬性稼跳。但是既然被人發(fā)現(xiàn)了匾效，而且能用惩妇，為什么不試試呢~o(∩_∩)o
p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
Demo:http://jsfiddle.net/Cople/maB8f/
2
-o-ellipsis-lastline
從 Opera 10.60 開(kāi)始碧聪，text-overflow屬性有了一個(gè)名為-o-ellipsis-lastline的值冒版。應(yīng)用后的效果就像名字一樣，在文本的最后一行加上省略號(hào)逞姿。這個(gè)方法比樓上的方法簡(jiǎn)單多了壤玫，可惜也不在標(biāo)準(zhǔn)之內(nèi)//(ㄒoㄒ)//
p{overflow:hidden;white-space:normal;height:3em;text-overflow:-o-ellipsis-lastline;}
Demo:http://jsfiddle.net/Cople/ash5v/
3
jQuery
$(".figcaption").each(function(i){
? ? ? ? var divH = $(this).height();
? ? ? ? var$p=$("p",$(this)).eq(0);
? ? ? ? while($p.outerHeight()>divH)
? ? ? ? {
? ? ? ? ? ? ? ? $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,"..."));
? ? ? ? };
});
