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;
}
p {
行の高さ: 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プロパティの詳細な説明

ブログ    

推薦する

MySQLストアドプロシージャの原理と使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの原理と使用方法を説明します。ご参考ま...

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...

Linux で MySQL スケジュールタスクを実装する方法

前提: ストアド プロシージャは、毎日午後 10 時から午前 5 時まで 10 分ごとに実行されます...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...

写真のプレビューとアップロード機能を実現するhtml+css+js

はじめに: Web ページを作成するときに、画像をアップロードする必要がある場合がよくあります。画像...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

Windows10のマウスを模倣して境界線を光らせる効果を実現するCSSの詳細解説

最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...

Docker ベースの ELK を素早く構築する方法

[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...

6つのレイアウトでのFrameLayoutの使用

序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...

HTMLのリストタグを数える

1. <dl>はリストを定義し、<dt>はリスト内の項目を定義し、<d...

process.env.NODE_ENV 本番環境モードを設定する方法

始める前に、process.env.NODE_ENV にはデフォルトで開発と本番の 2 つの状態しか...

JSはclip-pathを使用して動的領域クリッピング機能を実装します

背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...