高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプルコード

序文

これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にランクされているものでは、互換性の低い-webkit-line-clampを使用した解決策しか紹介されていません。

この記事をご覧になっているということは、多くのありきたりな記事からここにたどり着き、より良い解決策を探しているということかもしれません。それではおめでとうございます。これより良いものはなく、より適切なものだけです。もちろん、前提として、私の記事に十分なトラフィックがあり、上位に押し上げられて、皆さんに見てもらえる機会が得られることが前提です。

複数行のテキストを切り捨てる方法は 3 つあります。もちろん、最初の方法は-webkit-line-clampソリューションで、吐き出してしまいたくなるかもしれません。読みたくない場合は、2 番目の方法に進んで読み始めてください。

-webkit-line-clamp の使用

複数行テキストコンテナに次のスタイルを適用します

div {
  ディスプレイ: -webkit-box;
  -webkit-box-orient: 垂直;
  オーバーフロー: 非表示;
  -webkit-line-clamp: 2;
}

-webkit-line-clampを除き、他のプロパティは変更されません。主な目的は、オブジェクトを弾性ボックスモデルとして表示し、弾性ボックスオブジェクトの子要素の配置を設定することです。

-webkit-line-clamp省略する行数を制御するために使用されます

アドバンテージ：

ブラウザは省略動作をネイティブにサポートしており、スタイルは快適に見える
使いやすい

欠点:

属性のプレフィックスからわかるように、これはwebkitカーネルを搭載したブラウザでサポートされていますが、互換性は広くありません。

使用シナリオ

Webkit ベースのブラウザーまたはモバイルデバイスのみをターゲットとする場合 (ほとんどのモバイルブラウザーは Webkit ベースのブラウザーカーネルに基づいています)、このソリューションが最適です。

絶対位置指定の使用

このソリューションは、実は非常に理解しやすいものです。まず、省略記号用のコンテンツを保持するコンテナーの右側にスペースを予約し、スペースを予約するためにpadding-right: 1em;を使用します。なぜ 1em なのでしょうか? 省略記号はほぼ 1em です。em 単位はフォントサイズに対応するために使用されます。

絶対配置を使用して、省略記号を予約されたスペースの右下隅に配置します。

html

<div class="wrap">コンテンツ</div>

.wrap3 {
    位置: 相対的;
    右パディング: 1em;
    /*max-height は、表示する行数に応じて line-height の倍数になります */
    最大高さ: 3.6em;
    行の高さ: 1.2em;
    テキスト配置: 両端揃え;
    オーバーフロー: 非表示;
}

.wrap3:前{
    位置: 絶対;
    右: 0;
    下部: 0;
    コンテンツ： '...';
}

効果（複数の内容）：

このように、省略記号は常に存在します。そこで、この問題を解決するために、背景と同じ色の四角形を使用して省略記号を覆います。重要な点は、いつ省略記号を覆うべきか、いつ覆わないべきかをどうやって判断するかということです。

アイデア: 省略記号をブロックするために使用される四角形も絶対位置に配置され、右に設定されますright: 0 )。ただし、 bottom値は設定しないでください。設定しないと、四角形はmax-heightの高さではなく、テキストコンテンツの実際の高さに合わせて移動します。この場合、省略する必要がない（つまり、 max-heightを超えない）ときは、たまたまbottom: 0となり、省略記号がブロックされます。省略記号を省略する場合（つまり、 max-heightを超える場合）、省略記号はブロックされず、省略記号自体はoverflow: hiddenによって非表示になります。

したがって、最終的な解決策は次のようになります。

html

<div class="wrap">コンテンツ</div>

。包む {
    位置: 相対的;
    /*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;
}

効果：

アドバンテージ

互換性が高く、すべての主要ブラウザでサポートされています
適応型の高さ、高さをハードコードする必要がなく、表示前に省略する行数を設定できます
適応幅
適応フォントサイズ、フォントサイズは元の要件に影響を与えません、つまり、省略する必要がある行数は省略されます

欠点

省略記号を配置するために、テキストの右側にいくらかのスペースが残されます。
after 疑似クラスは背景色を使用して省略記号をカバーするため、背景色を考慮する必要があります。

フロートレイアウトの使用

この解決策は、基礎知識がしっかりしていない人にとっては理解しにくいかもしれません。解決策だけを知りたいだけで原理を知りたくない場合は、直接

この解決策について話す前に、まず次のような現象を理解する必要があります。

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 {
	フロート: 右;
	背景: 黄色;
}

通常の状況では、次のように表示されます。これは、誰もが一般的に想像できるものでもあります。

この正常な現象が発生する条件は次のとおりです。

.right1の高さは.leftの高さを超えません (つまり、コンテンツが少なくなります)
.right2の幅は.right1の幅よりも小さいです

はい、この状況は皆さんも理解されていると思います。次に、 .right1の内容を左フロートの高さを超えるように増やすと、次のようになります。

右フロート 2 が左下隅に詰まっています。

なぜこんなことが起こったのか聞きたいですか？えーと...フロートの基礎知識がしっかりしていないようですね。基礎知識を固めることをお勧めします。実は、説明できません。これがフロートの通常のパフォーマンスだということしか知りません。

この現象が発生する条件は次のとおりです。

.right1の高さが.leftの高さを超えています (つまり、コンテンツが多い)
.right2の幅は.leftの幅以下です

知識を需要実現に変える

上記の 2 つのシナリオを理解した後、この知識をどのように活用して対応するニーズに合わせればよいでしょうか?

右フロート 1 のテキストコンテンツが複数行で省略するコンテンツであり、右フロート 2 のコンテンツが省略記号 (...) であると仮定します。このように、コンテンツが少ない場合は省略は前述の最初のケースとなり、コンテンツが多い場合は2番目のケースとなります。

この動的な変化は、「文字が小さいときは省略しない、文字が大きいときは省略する」という需要の変化に似ているでしょうか。これを踏まえると、解決すべき問題は、最初のケースでは右のフロート 2 が非表示になり、2 番目のケースでは右のフロート 2 が.wrapの右下隅に表示され、高さを超えるコンテンツが非表示になることです。

上記の問題を解決するには、相対的な配置にposition: relative;を使用するだけです。 .wrap親コンテナーにoverflow: hidden;を適用します。最初のケースでは、親コンテナーの外側に配置され、非表示になります。 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;
    コンテンツ： '...';
}

この時点で気になるのは、 .textがwidth: 100%;に設定されているのに、コンテンツが大量にあるときに : :afterが : :beforeの下に固定されているのはなぜでしょうか?これは、 .textでmargin-left: -1.5em;を設定しても、元のドキュメントフローに実際には影響しないためです。本来あるべき状態のままになります。負のマージンを設定すると、 .text自体の表示スタイルにのみ影響します。

見つける方法

位置決め問題の解決は、前のセクションのコードに基づいています。現在明らかになっている問題は次のとおりです。

内容が少なく省略する必要がない場合は省略記号が表示されます
省略できないほど内容が多すぎる場合は、省略記号で

まず2番目の問題を解決しましょう。

アイデア: この:after .wrapの右側に移動し、最後の行まで移動します。

position: relative;を使用して制御すると、 top値を簡単に取得できます。.wrap .wrap line-heightの実際の値と同じ値を取得し、負の値を使用するだけです。重要なのは左の値であり、それをどのように選択すれば右下隅に正確に表示されるかということです。

.textの幅 (100px など) がわかっている場合は、 left: 100px;と設定するだけで済みますが、これは固定幅の場合のみ機能し、幅には適応しません。適応性を実現するために、left の値はパーセンテージとして取得できますが、そのパーセンテージはいくらでしょうか?絡まってます。 100% を取得すると、親コンテナーから移動されることがわかります。

省略記号を右下隅に表示する場合、省略記号の初期位置は.wrapの左側、 .wrapのすぐ隣にする必要があります。そうすることで、 left: 100%の後に省略記号が右下隅に表示されるようになります。

ここで問題になるのは:after .wrapのすぐ左に表示させる方法です。次のコードは、しっかりした基礎知識のない人にとっては理解しにくいかもしれません (新しい部分はコメントにあります)。

.wrap:after {
    フロート: 右;
    /* マージンが下で設定されているため、ここでの幅の値は必要ありません */
    幅: 1em;
    コンテンツ： '...';
    
    /*これらの 2 つのプロパティは .wrap の左側に設定されます*/
    /*この値は自身の幅と同じで、負の値を取る必要があります*/
    左マージン: -1em;
    /*この値は前の幅と同じである必要があります*/
    右パディング: 1.5em;
    
    /*省略記号が配置される場所です*/
    位置: 相対的;
    左: 100%;
    /*親要素の実際の行の高さと同じ、負の値*/
    上: -20px;
}

margin と padding の値の設定に関しては、理解できればベストですが、理解できない場合は、できるだけ説明しようと思いますが、説明するのは本当に難しいです。

まず、 margin-left: 1em;を適用すると、 :afterの幅が:beforeの幅よりも小さくなるため、元のフロートレイアウトでは、

ピンクは左に、青と赤は右に浮かびます。ピンク色以外の残りのスペースまで赤色の幅が広がり続けると、1行ではスペースが足りないため、青色は改行に押し込まれて右に浮かびます。しかし、青い margin-left を自身の幅の負の値に設定すると、1行にまだ余裕が残り、次のようになります。

上記の原則に従って、 margin-left: 1em;を設定すると、 :after親コンテナの最初の行に戻り、親コンテナの左側の隣に配置されます。しかし、これを最初の行に戻すことはできないので、 padding-right: 1.5em;を設定して、実際に占めるスペースを大きくし、最初の行に収まらないようにします。これにより、 :before下の元の位置に戻りますが、 padding 値によって左に移動します。

はい、説明は終わりです。理解できるかどうかは運次第です、ハハハ。

上記のコードの幅に関するコメントには、「marginは下に設定されているため、ここではwidthの値は必要ありません」と書かれていることに注意してください。以前は、 :before幅以下である必要がありましたが、現在では、margin-leftの負の値が元の幅をオフセットするため、この要件はpadding-rightに変換され、次の値に等しくなります。

まとめ

これまでのところ、すべての問題は解決されています。上記で説明したすべての問題については、次のコードにまとめられています (特定の最適化についてはコメントで説明されています)。

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>

効果：

アドバンテージ

互換性が高く、WebKitベースではないブラウザでもサポートできます。
適応幅

欠点

高さは固定されており、高さに適応できないため、表示される行数もフォントサイズによって制限されます。
スタイルを設定するには、テキストをタグで囲む必要があります
スタイルコードを読むという観点からは、理解するのは簡単ではありません
省略記号が配置されている要素にグラデーション背景が使用されていない場合、省略記号が突然切り取られたように見えることがあります。グラデーション背景を使用する場合は、テキストが配置されている背景と色が一致するように注意してください。

要約する

実際のところ、どのプランが優れているかは言うまでもなく、自分に適しているかどうかだけです。果物の皮をむくように言われたら、果物ナイフを持っていくだけでよく、大きなナイフを使う必要はありません。したがって、ニーズを満たすオプションは常に 3 つあります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

>>: MySQL に 1,000 万件のレコードを素早く挿入する方法