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

我的使用的方法

.ellipsis1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ellipsis2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

 

 

如下轉載相關介紹：

如今的瀏覽器都支持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/

HTMLjQuery教程

本站文章除註明轉載外，均爲原創文章。轉載請註明：文章轉載自：小影志（ http://c7sky.com/）