实现单行文本的溢出显示省略号大家应该都知道用text-overflow:ellipsis 属性来，再加上width限制宽度。

overflow: hidden; 
text-overflow:ellipsis; 
white-space: nowrap;

实现效果：

但是这个属性只支持单行文本的溢出显示省略号，不支持多行文本溢出显示省略号。

以下为实现多行文本溢出显示省略号的多种方法：

-webkit-line-clamp

p {

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

实现效果：

jQuery

除了各个浏览器私有的属性，有没有跨浏览器的解决方法呢？当然是通过js实现啦！（通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度）

$(".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)(\.\.\.)?$/,"..."));  
    };  
});