HTML exceeds text multi-line truncation code

The code for HTML multi-line text truncation is as follows:
 

<Div class = "sytm-text-1"> <p> </div> <div class = "sytm-text-2"> <p> </div> CSS:. sytm-text-1 {color: # FFF; background: #000; width: pixel PX; height: 22px ;}. sytm-text-2 {color: # FFF; background: #000; width: pixel PX; height: 44px;} p {line-height: 22px;} JS (introduced jQuery ): $ ("div [class * = 'sytm-text']"). each (function (e) {var divHeight = $ (this ). height (); var $ p = $ ("p", $ (this )). eq (0); while ($ p. outerHeigh T ()> divHeight) {$ p. text ($ p. text (). replace (/(\ s) * ([a-zA-Z0-9] + | \ W )(\. \. \.)? $ /,"..."));};});

Through the above code, we can find that the main principle to achieve this effect is to use the sub-container (p) to compare the height of the parent container (div) to extract Characters Based on the regular expression until the two are equal. Therefore, the key to controlling the number of intercepted rows is the div height.