（转）文本溢出省略号……

标签：style   http   java   os   io   ar   div   cti   

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.html
http://jsfiddle.net/MPkSF/

（转）文本溢出省略号……,布布扣,bubuko.com

（转）文本溢出省略号……

标签：style   http   java   os   io   ar   div   cti   

原文地址：http://www.cnblogs.com/yanglian/p/3927350.html