多行文字溢位最後一行顯示省略號
阿新 • • 發佈：2018-12-05
現在的瀏覽器都支援text-overflow:ellipsis屬性，用來實現單行文字的溢位顯示省略號，但是這個屬性並不支援多行文字。那麼有沒有方法在多行文字上實現同樣的效果呢？
1、-webkit-line-clamp
Webkit支援一個名為-webkit-line-clamp的屬性，他其實是一個
WebKit-Specific Unsupported Property，也就是說這個屬性並不是標準的一部分，可能是Webkit內部使用的，或者被棄用的屬性。
p { overflow : hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
2、-o-ellipsis-lastline
從 Opera 10.60 開始，text-overflow屬性有了一個名為-o-ellipsis-lastline的值。應用後的效果就像名字一樣，在文字的最後一行加上省略號。這個方法比樓上的方法簡單多了，可惜也不在標準之內
p {
overflow: hidden;
white-space: normal;
height: 3em;
text-overflow: -o-ellipsis-lastline;
}html部分
css部分<div class="figcaption"><p>作為微軟的遊戲平臺，Xbox已經出現在了Windows Phone和Windows 8中，就在最近，微軟宣佈將旗下的Zune消費品牌也一併整合至Xbox品牌下，Xbox Live服務影響力越來越大，滲透面也越來越廣。</p></div> <div class="figcaption"><p>固定一個喜歡的網站可不可以？當然！把每天常去的網站統統固定到開始螢幕中。如何固定？開啟 IE10，在網頁空白處點選滑鼠右鍵，在應用欄中點選“圖釘”圖示即可完成固定。</p></div>
.figcaption {
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p {
margin: 0;
line-height: 1.5em;
}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)(\.\.\.)?$/, "..."));
};
});