텍스트 다중라인 가로채기 구현원리와 코드를 넘어서는 HTML_HTML/Xhtml_웹페이지 제작

텍스트 이외의 여러 줄의 HTML을 가로채는 코드는 다음과 같습니다.

HTML:

코드 복사

코드는 다음과 같습니다.

스크립트 홈 URL: http:// www.jb51.net
< ;/p>

URL: http://www.jb51.net

CSS:

코드 복사

코드는 다음과 같습니다.

.sytm-text-1 {

color: #FFF

배경: #000;
높이:
}
.sytm-text-2 {
배경: #000; 🎜>너비: 410px;
높이: 44px;
}
p {
라인 높이: 22px;
}


JS(jQuery 소개)

코드 복사

코드는 다음과 같습니다.

$("div[class *='sytm-text']").each(함수 (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)(...)? $/, "..."));

}
}); 이 효과를 달성하는 주요 원칙은 하위 컨테이너를 통한 위의 코드입니다. (p) 상위 컨테이너(div)의 높이와의 비교는 둘이 동일해질 때까지 정규식을 기반으로 문자 잘림을 수행합니다. 따라서 가로채는 줄 수를 제어하는 ​​핵심은 당연히 div의 높이입니다.