转自：http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html

1

---

-webkit-line-clamp

Webkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标准的一部分，可能是Webkit内部使用的，或者被弃用的属性。但是既然被人发现了，而且能用，为什么不试试呢~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 开始，text-overflow属性有了一个名为-o-ellipsis-lastline的值。应用后的效果就像名字一样，在文本的最后一行加上省略号。这个方法比楼上的方法简单多了，可惜也不在标准之内//(ㄒ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)(\.\.\.)?$/,"..."));

        };

});

Demo:http://jsfiddle.net/Cople/DrML4/5/