HTML beyond text multi-line interception implementation principle and code_HTML/Xhtml_Web page production

The code for intercepting multiple lines of HTML beyond the text is as follows:

HTML:

Copy the code

The code is as follows:

Script Home URL: http://www.jb51.net
< ;/p>

Script Home URL: http://www. jb51.net

CSS:

Copy code

The code is as follows:

.sytm-text-1 {
color: #FFF;
background: #000;
width: 410px ;
height: 22px;
}
.sytm-text-2 {
color: #FFF;
background: #000;
width: 410px;
height: 44px;
}
p {
line-height: 22px;
}

JS (introducing jQuery):

Copy code

The code is as follows:

$("div[class*='sytm-text']").each(function (e){
var divHeight = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p .outerHeight() > divHeight) {
$p.text($p.text().replace(/(s)*([a-zA-Z0-9] |W)(...)? $/, "..."));
};
});

It can be found from the above code that the main principle of achieving this effect is through subcontainers (p) Comparison with the height of the parent container (div) performs character truncation based on regular expressions until the two are equal. So the key to controlling the number of intercepted lines is naturally the height of the div.