Text overflow ellipsis ......

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


In addition to the CSS attribute, it is implemented through JS (by deleting the end characters one by one from the back to the front until the height of the element is smaller than the height of the parent element)

$(".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)(\.\.\.)?$/, "..."));    };});

 

 

Instance:

<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 divl = $ ('# Fos'). Height ();
While ($ (P). outerheight ()> divl ){
$ (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/