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 アルファ透明度 (完全コレクション)
推薦する
js でクラスセレクターと名前属性セレクターを実装する手順の例
jQuery の登場により、DOM の操作効率が大幅に向上し、開発がより高いレベルに引き上げられまし...
Docker デプロイメント Springboot プロジェクト例の分析
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
Linuxの一般的なコマンドでLinuxのmoreコマンドを使用する方法
more は、最もよく使用されるツールの 1 つです。最も一般的な使用方法は、出力コンテンツを表示し...
JavaScript オブジェクト (詳細)
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
JavaScript で二分探索木を実装する
JavaScriptでの検索二分木実装は参考までに。具体的な内容は以下のとおりです。バイナリ検索木 ...
固定テーブル幅テーブルレイアウト: 固定
テーブルを画面全体（残りの空白領域）に表示するために、幅属性は 100% と定義されることが多く、セ...
実用的な MySQL + PostgreSQL バッチ挿入更新 insertOrUpdate
目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...
Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)
序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...
Vueは、サイドナビゲーションバーをタブページに関連付けるサンプルコードを実装します。
目次テクノロジースタック効果分析するテクノロジースタックサイドバー用Antdtabは要素を使用します...
忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
インライン要素とブロック要素とは何ですか?
1. インライン要素はコンテンツの幅のみを占めますが、ブロック要素はコンテンツの量に関係なく行全体を...
MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します
序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...
Vue でよく使われる高階関数と包括的な例
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法
背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...