ホームページ > 記事 > ウェブフロントエンド > HTML ビヨンドテキストの複数行インターセプトの実装原理と code_HTML/Xhtml_Web ページの作成
HTML ビヨンドテキストの複数行インターセプトの実装原理と code_HTML/Xhtml_Web ページの作成
- WBOYオリジナル
- 2016-05-16 16:39:541569ブラウズ
テキスト以外の HTML の複数行をインターセプトするコードは次のとおりです。
HTML:
コードをコピー
コードは次のとおりです: スクリプト ホーム URL: http:// www.jb51.net
スクリプト ホームURL: http://www.jb51.net
コードをコピーします
コードは次のとおりです。
.sytm-text-1 { color: #FFF;背景: #000; 高さ: 22px; .sytm-text-2 { 色: #000; 🎜>幅: 410px;
高さ: 44px; p {
line-height: 22px;
}
JS (jQuery の導入):
コードをコピーします
コードは次のとおりです。
$("div[class *='sytm-text']").each(function (e){ line-height: 22px;
}
JS (jQuery の導入):
コードをコピーします
コードは次のとおりです。
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) の高さとの比較では、2 つが等しくなるまで正規表現に基づいて文字の切り捨てが実行されます。したがって、インターセプトされる行の数を制御する鍵は、必然的に div の高さになります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。