多行文本溢出顯示省略號(...)的方法

原創

2020-02-22 11:57

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

-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/

-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/

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

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

原文地址：http://c7sky.com/text-overflow-ellipsis-on-multilinea-text.html