（轉）文本溢出省略號……

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


除了css屬性，經過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)(\.\.\.)?$/, "...")); }; });

 

 

實例：

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

 

var p=$('#fos p');
var divh=$('#fos').height();
while ($(p).outerHeight()>divh) {
$(p).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}

 http://c7sky.com/text-overflow-ellipsis-on-multiline-text.htmlhttp://jsfiddle.net/MPkSF/