HTMLはテキスト行のインターセプトの実装原理とコードを超えています

HTMLはテキスト行のインターセプトの実装原理とコードを超えています
複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。

HTML:

コードをコピー
コードは次のとおりです。

<div class="sytm-text-1">
<p>
123WORDPRESS.COM ウェブサイト: https://www.jb51.net
</p>
</div>
<div class="sytm-text-2">
<p>
123WORDPRESS.COM ウェブサイト: https://www.jb51.net
</p>
</div>

CS: ...

コードをコピー
コードは次のとおりです。

.sytm-text-1 {
色: #FFF;
背景: #000;
幅: 410ピクセル;
高さ: 22px;
}
.sytm-text-2 {
色: #FFF;
背景: #000;
幅: 410ピクセル;
高さ: 44px;
}
ｐ {
行の高さ: 22px;
}

JS (jQuery をインポート):

コードをコピー
コードは次のとおりです。

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

上記のコードから、この効果を実現するための主な原則は、子コンテナ (p) の高さを親コンテナ (div) の高さと比較し、両者が等しくなるまで正規表現に従って文字インターセプションを実行することであることがわかります。したがって、インターセプトされる行の数を制御する鍵は、当然 div の高さにあります。

<<:  IE6 での PNG アルファ透明度 (完全コレクション)

>>:  CSS floatプロパティの詳細な説明

推薦する

html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

オブジェクト上にマウスを移動したときにコンテンツ（タイトル属性の内容）を折り返す方法、HTML タイ...

WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。

1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

MySQL: データの整合性

データ整合性は、エンティティ整合性、ドメイン整合性、参照整合性に分けられます。参照整合性:参照整合性...

HTML 中国語文字エンコード標準の概要

HTML では、Web ページで使用されるエンコーディングを指定する必要があります。一般的な指定方法...

Docker+nextcloudで個人用クラウドストレージシステムを構築

1. Dockerのインストールと起動 yum で epel-release をインストールします ...

純粋な CSS3 で美しい入力ボックスアニメーションスタイルライブラリを実現 (テキスト入力愛)

純粋な CSS3 で実装された美しい入力ボックス アニメーション スタイル ライブラリを共有します ...

MySQL ストアド プロシージャで if ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの if ステートメントの使用方法を...

Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...

CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

目次jupyterをインストールするDocker ポートマッピングjupyterをインストールするp...

Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...

MySQLがトランザクション分離を実装する方法の簡単な分析

目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...

MySQL データベース シェル import_table データ インポート

目次MySQL Shell import_table データのインポート1. import_tabl...

iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...