Although IE9 phase out, but ... To be compatible with IE8 's multi-line ellipsis function, the JQ plug-in ell
JQuery.fn.ell =function(count) { for(vari = 0; I < $ ( This). length; i + +){ varEle = $ ( This). EQ (i); //width and height of the words varW =ele.width (); varH =ele.height (); //get element ' s children p varp = ele.find (' P '); //get element ' s lineheight varLineheight = parsefloat (ele.css (' line-height ') | | ele.find (P). css (' line-height '))); if(Count = = 1{Ele.find (P). css ({' Width ': W,' Text-overflow ': ' Ellipsis ', ' White-space ': ' nowrap ', ' Overflow ': ' Hidden ' }) } Else if(Count >1) { varDIVH = lineheight*count; if(H! = ' Auto ') {ele.css ({' Height ': Divh}); } //If the height of the most p is greater than DIVH, then the number of extra rows at the end of StrEle.each (function(i) { while(P.outerheight () >DIVH) {P.text (P.text (). Replace (/(\s) * (\w+|\w) (\.\.\.)? $/, "...")); }; }) } }};
The HTML, CSS, and Invoke JS are as follows:
<style>.words {border:1px solid #ddd; margin-bottom:20px;/* The following three attributes must have */width:300px;overflow:hidden; line-height:25px;/* above three attributes must have */}</style>
<script src= "Jquery.js" ></script><script src= "Ell.js" ></script>
<script> $ (function () {$ ('. Words '). Ell (2);}) </script>
<body><div class= "Words" ><p> I am super long text Markup Language I am super long text Markup Language I am super long text Markup Language I am super long text Markup Language </p></div> <div class= "Words" ><P>DSFASDSF asdsf asdsfas</p></div><div class= "words" ><p> is super long text Markup Language I am super long text Markup Language I am super long text Markup Language I am super long text Markup Language I am super long text Mark language I am super long text Markup Language I am super long text Markup Language I am super long text Markup Language I am super long text Markup Language I am super </p></div>
Effect:
JS implementation of multiple lines omitted