序文 これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にランクされているものでは、互換性の低い この記事をご覧になっているということは、多くのありきたりな記事からここにたどり着き、より良い解決策を探しているということかもしれません。それではおめでとうございます。これより良いものはなく、より適切なものだけです。もちろん、前提として、私の記事に十分なトラフィックがあり、上位に押し上げられて、皆さんに見てもらえる機会が得られることが前提です。 複数行のテキストを切り捨てる方法は 3 つあります。もちろん、最初の方法は -webkit-line-clamp の使用 複数行テキストコンテナに次のスタイルを適用します div { ディスプレイ: -webkit-box; -webkit-box-orient: 垂直; オーバーフロー: 非表示; -webkit-line-clamp: 2; } アドバンテージ:
欠点: 属性のプレフィックスからわかるように、これは 使用シナリオ Webkit ベースのブラウザーまたはモバイル デバイスのみをターゲットとする場合 (ほとんどのモバイル ブラウザーは Webkit ベースのブラウザー カーネルに基づいています)、このソリューションが最適です。 絶対位置指定の使用 このソリューションは、実は非常に理解しやすいものです。まず、省略記号用のコンテンツを保持するコンテナーの右側にスペースを予約し、スペースを予約するために 絶対配置を使用して、省略記号を予約されたスペースの右下隅に配置します。 html <div class="wrap">コンテンツ</div> CS .wrap3 { 位置: 相対的; 右パディング: 1em; /*max-height は、表示する行数に応じて line-height の倍数になります */ 最大高さ: 3.6em; 行の高さ: 1.2em; テキスト配置: 両端揃え; オーバーフロー: 非表示; } .wrap3:前{ 位置: 絶対; 右: 0; 下部: 0; コンテンツ: '...'; } 効果(複数の内容): このように、省略記号は常に存在します。そこで、この問題を解決するために、背景と同じ色の四角形を使用して省略記号を覆います。重要な点は、いつ省略記号を覆うべきか、いつ覆わないべきかをどうやって判断するかということです。 アイデア: 省略記号をブロックするために使用される四角形も絶対位置に配置され、右に設定されます したがって、最終的な解決策は次のようになります。 html <div class="wrap">コンテンツ</div> CS 。包む { 位置: 相対的; /*line-height と height は互いに調整する必要があります。省略される行数は line-height の倍数です*/ 行の高さ: 1.2em; 最大高さ: 3.6em; /*このプロパティは需要によって決定されます。padding-right が設定されているため、より多くのスペースが解放されます。この値は通常、padding-right の負の値です*/ /*左マージン: -1em;*/ /*省略記号はおそらく 1em のスペースを占めるので、この値は 1em としてハードコードする必要があります*/ 右パディング: 1em; テキスト配置: 両端揃え; オーバーフロー: 非表示; } .wrap:before { 位置: 絶対; 右: 0; 下部: 0; コンテンツ: '...'; } .wrap:after { 位置: 絶対; 右: 0; /* 省略記号は省略記号を覆うために約 1em のスペースを占めるため、幅と高さを 1em に設定します。これは基本的に wrap の padding-right と同じです。*/ 幅: 1em; /*折り返し行の高さの実際の値と一貫性を保つ*/ 高さ: 1.2em; コンテンツ: ''; /*省略記号が異常なく隠れるように背景色と一致させる必要があります*/ 背景色: #fff; } 効果: アドバンテージ
欠点
フロートレイアウトの使用 この解決策は、基礎知識がしっかりしていない人にとっては理解しにくいかもしれません。解決策だけを知りたいだけで原理を知りたくない場合は、直接 この解決策について話す前に、まず次のような現象を理解する必要があります。 HTMLにはこのようなセクションがあります <div class="wrap"> <div class="left">左フロート</div> <div class="right1">右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1 右にフロート 1</div> <div class="right2">右にフロート 2</div> </div> このスタイルを適用する 。包む { 高さ: 100px; } 。左 { フロート: 左; 幅: 60ピクセル; 高さ: 100%; 背景: ピンク; } .right1 { フロート: 右; /*左以外の残りの幅を占有します*/ 幅: calc(100% - 60px); 背景: #95d9f8; } .right2 { フロート: 右; 背景: 黄色; } 通常の状況では、次のように表示されます。これは、誰もが一般的に想像できるものでもあります。 この正常な現象が発生する条件は次のとおりです。
はい、この状況は皆さんも理解されていると思います。次に、 右フロート 2 が左下隅に詰まっています。 なぜこんなことが起こったのか聞きたいですか?えーと...フロートの基礎知識がしっかりしていないようですね。基礎知識を固めることをお勧めします。実は、説明できません。これがフロートの通常のパフォーマンスだということしか知りません。 この現象が発生する条件は次のとおりです。
知識を需要実現に変える 上記の 2 つのシナリオを理解した後、この知識をどのように活用して対応するニーズに合わせればよいでしょうか? 右フロート 1 のテキスト コンテンツが複数行で省略するコンテンツであり、右フロート 2 のコンテンツが省略記号 (...) であると仮定します。このように、コンテンツが少ない場合は省略は前述の最初のケースとなり、コンテンツが多い場合は2番目のケースとなります。 この動的な変化は、「文字が小さいときは省略しない、文字が大きいときは省略する」という需要の変化に似ているでしょうか。これを踏まえると、解決すべき問題は、最初のケースでは右のフロート 2 が非表示になり、2 番目のケースでは右のフロート 2 が 上記の問題を解決するには、相対的な配置に さて、ここでの解決策の焦点は、問題を正確に特定する方法に移ります (次のセクション)。位置決めの問題に対処する前に、まず現在の状況を実際の需要コードに変換します。 <!-- 疑似要素を使用して、左と右のフロート 2 の実際のタグを置き換えます --> <div class="wrap"> <div class="text">右にフロート 1</div> </div> 。包む { 高さ: 100px; /*line-height は、表示できるテキストの最大行数を制御するために使用されます*/ 行の高さ: 20px; オーバーフロー: 非表示; } .wrap:before { フロート: 左; /* after 要素の幅以上である必要があります*/ 幅: 1.5em; 高さ: 100%; コンテンツ: ''; } 。文章 { フロート: 右; /* before によって作成された空白スペースを回避するために、負の marginLeft を使用します*/ /*実際の需要では、親コンテナの左側を空白にすることは不可能です*/ 左マージン: -1.5em; /*負の marginLeft 値が使用されているため、テキスト コンテナーの幅は親コンテナーの幅の 100% を占める可能性があります */ 幅: 100%; } .wrap:after { フロート: 右; /*一般的に、3 つのドットの幅は約 1em です。単位として em を使用すると、フォント サイズを適応させることができます。*/ 幅: 1em; コンテンツ: '...'; } この時点で気になるのは、 見つける方法 位置決め問題の解決は、前のセクションのコードに基づいています。現在明らかになっている問題は次のとおりです。
まず2番目の問題を解決しましょう。 アイデア: この 省略記号を右下隅に表示する場合、省略記号の初期位置は ここで問題になるのは .wrap:after { フロート: 右; /* マージンが下で設定されているため、ここでの幅の値は必要ありません */ 幅: 1em; コンテンツ: '...'; /*これらの 2 つのプロパティは .wrap の左側に設定されます*/ /*この値は自身の幅と同じで、負の値を取る必要があります*/ 左マージン: -1em; /*この値は前の幅と同じである必要があります*/ 右パディング: 1.5em; /*省略記号が配置される場所です*/ 位置: 相対的; 左: 100%; /*親要素の実際の行の高さと同じ、負の値*/ 上: -20px; } margin と padding の値の設定に関しては、理解できればベストですが、理解できない場合は、できるだけ説明しようと思いますが、説明するのは本当に難しいです。 まず、 ピンクは左に、青と赤は右に浮かびます。ピンク色以外の残りのスペースまで赤色の幅が広がり続けると、1行ではスペースが足りないため、青色は改行に押し込まれて右に浮かびます。しかし、青い margin-left を自身の幅の負の値に設定すると、1行にまだ余裕が残り、次のようになります。 上記の原則に従って、 はい、説明は終わりです。理解できるかどうかは運次第です、ハハハ。 上記のコードの幅に関するコメントには、「marginは下に設定されているため、ここではwidthの値は必要ありません」と書かれていることに注意してください。以前は、 まとめ これまでのところ、すべての問題は解決されています。上記で説明したすべての問題については、次のコードにまとめられています (特定の最適化についてはコメントで説明されています)。 CSS スタイル 。包む { /*高さを設定する必要があります*/ 高さ: 100px; /*省略する前に表示する行数を設定するために使用します。この値は一般的に wrap の高さの値を行数で割ることで得られますが、行数はフォントサイズによって制限されます*/ /*フォントが大きすぎるため、多くの行を表示するように設定すると、すべての行が押しつぶされて見苦しくなります。したがって、実際の値は特定のニーズと実践によって異なります*/ 行の高さ: 25px; /*この属性を追加すると表示効果が向上し、一部のブラウザがサポートしていなくても大きな影響はありません*/ テキスト配置: 両端揃え; オーバーフロー: 非表示; } .wrap:before { フロート: 左; /*この値は単位やその他の条件に関係なく任意に設定できます*/ 幅: 1em; 高さ: 100%; コンテンツ: ''; } .wrap:after { フロート: 右; /*サイズは任意ですが、フォントサイズに適応できる em 単位で設定するのが最適です*/ /*次のグラデーション効果を使用する場合は、より良い効果を得るために、この値を前の幅の値よりも大きくする必要があります*/ /*値が大きいほど、グラデーション効果が顕著になり、影響を受ける範囲が大きくなります。 */ 幅: 2.5em; /*行の高さの実際のpx値は親要素のラップと同じです*/ 高さ: 25px; /*この値は自身の幅と同じで、負の値を取る必要があります*/ 左マージン: -2.5em; /*この値は前の幅と同じである必要があります*/ 右パディング: 1em; コンテンツ: '...'; テキスト配置: 右; /*ここでフロートレイアウトを使用して配置と移動を開始します*/ 位置: 相対的; /*親要素の実際の行の高さと同じ、負の値*/ 上: -25px; 左: 100%; /*グラデーション効果は、省略記号とコンテンツがより自然に接続され、あまり唐突にならないように設定されています。テキストが配置されている背景の色と一致するように注意してください(白を背景色に置き換えます)*/ 背景: #fff; 背景: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); 背景: -moz-linear-gradient(右へ、rgba(255, 255, 255, 0)、白 50%、白); 背景: -o-linear-gradient(右へ、rgba(255, 255, 255, 0)、白 50%、白); 背景: -ms-linear-gradient(右へ、rgba(255, 255, 255, 0)、白 50%、白); 背景: linear-gradient(右へ、rgba(255, 255, 255, 0)、白 50%、白); } .wrap .text { フロート: 右; /*この値は wrap:before の幅の値と同じである必要があります*/ 左マージン: -1em; 幅: 100%; } html ファイル: <div class="wrap"> <span class="text"> 例2:携帯電話の開発と交換の問題に対する解決策を配布する </div> 効果: アドバンテージ
欠点
要約する 実際のところ、どのプランが優れているかは言うまでもなく、自分に適しているかどうかだけです。果物の皮をむくように言われたら、果物ナイフを持っていくだけでよく、大きなナイフを使う必要はありません。したがって、ニーズを満たすオプションは常に 3 つあります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体
>>: MySQL に 1,000 万件のレコードを素早く挿入する方法
CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...
MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...
目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...
目次1. クロージャを使用する2. ES6クラスを使用する3. ES2020提案を使用する4. We...
目次複数の条件文複数属性オブジェクトスイッチステートメントを置き換えるデフォルトパラメータとデストラ...
解決策 1: HEAD に次のコードを挿入するなど、HTML ドキュメントで条件付きインポートを使用...
目次序文【ログ取り消し】 【REDOログ】 【バイナリログ】要約する序文MySQL には、REDO ...
環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...
目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...
目次概要1. store.jsを定義する2. store.js を使用するコンポーネント3. 成果を...
MySQLデータベースを完全にアンインストールするプロセスは次のとおりです。 1. MySQLサービ...
目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...
システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...
最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...
目次背景:必要:効果1. アイデア2. 実装1. ページとスタイル2. 初期化3. クリックすると4...