css 溢出文本顯示省略符號各種方法總結

文法：

text-overflow : clip | ellipsis

　　參數：
　　clip : 　不顯示省略標記（...），而是簡單的裁切
　　（clip這個參數是不常用的！）
　　ellipsis : 　當對象內文本溢出時顯示省略標記（...）

說明：
　　設定或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
　　請您注意，text-overflow:ellipsis屬性在FF中是沒有效果的。

樣本：
　　div { text-overflow : clip; }

　　text-overflow是一個比較特殊的樣式，我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜尋引擎更加友好，如：標題檔案有50個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text-overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了。

例

代碼如下	複製代碼
html代碼： <div> <p><span>CSS Web DesignDiv+css教程 - www.111cn.net</span><p> </div>

css代碼：

代碼如下	複製代碼
div{ width:200px;/*容器的基本定義*/ height:200px; background-color:#eee; } /* IE下的樣式 */ p span{ display: block; width:200px;/*對寬度的定義,根據情況修改*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* FF 下的樣式 */ p{clear:both;} p span{ float:left; max-width:175px;   /*IE不能解釋該屬性，而FF可以*/ } p:after{ content:"..."; }

注意:這裡還要補充的一點是關於p span 的寬度用了"max-width"這個屬性，IE不能解釋該屬性，而FF可以,這樣就避開了IE對SPAN寬度的重新應用。

如果你不想使用css可使用jquery實現

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