現(xiàn)在的瀏覽器都支持text-overflow:ellipsis屬性，用來實(shí)現(xiàn)單行文本的溢出顯示省略號，但是這個屬性并不支持多行文本。那么有沒有方法在多行文本上實(shí)現(xiàn)同樣的效果呢？

-webkit-line-clamp

Webkit支持一個名為-webkit-line-clamp的屬性，他其實(shí)是一個WebKit-Specific Unsupported Property，也就是說這個屬性并不是標(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;
}

-o-ellipsis-lastline

從 Opera 10.60 開始，text-overflow屬性有了一個名為-o-ellipsis-lastline的值。應(yīng)用后的效果就像名字一樣，在文本的最后一行加上省略號。這個方法比樓上的方法簡單多了，可惜也不在標(biāo)準(zhǔn)之內(nèi)//(ㄒoㄒ)//

p {
    overflow: hidden;
    white-space: normal;
    height: 3em;
    text-overflow: -o-ellipsis-lastline;
}

jQuery

除了各個瀏覽器私有的屬性，有沒有跨瀏覽器的解決方法呢？當(dāng)然是通過js實(shí)現(xiàn)啦！（通過從后向前逐個刪除末尾字符，直至元素的高度小于父元素高度

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