純粋な CSS カスタム複数行省略記号の問題 (原理から実装まで)

テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行ですか、複数行ですか?切り捨て、省略記号、カスタムスタイル、適応高さ?答えはここにあります。次に、浅いところから深いところへ、原則から実装まで、段階的に複数行省略記号のベールを剥がしていきます。最も単純な 1 行のオーバーフロー省略記号から始めましょう。

ウォームアップ、1行省略

これは、あまり魔法を使わずに宇宙全体のための統一された解決策です

/* 原則: テキストを折り返さないように設定し、オーバーフロー後に非表示にし、省略記号を表示するために切り捨てます*/
.省略記号 {
  空白: ラップなし;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
}

複数行の省略記号を実現するにはどうすればよいでしょうか?最も単純なline-clampから始めましょう。

最も単純な複数行省略記号、行クランプ

CSS プロパティ-webkit-line-clampブロックコンテナー内のコンテンツを指定された行数に制限できます。

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

プロパティの-webkitプレフィックスは、物事が単純ではないことを示しています。はい、モバイルデバイスに非常に優しいwebkitカーネルに基づくブラウザーのみをサポートしています。Android 2.3 以降および IOS 5.0 以降のデバイスでは、問題なく上記のコードを直接挿入できますが、PC で使用する場合は互換性の問題に注意する必要があります。

PC の互換性の問題に加えて、 line-clampソリューションはカスタム省略記号スタイルをサポートしていません。省略記号の後にテキストや矢印などのカスタムスタイルを追加する必要がある場合は、フローティングなどの他のソリューションを検討する必要があります。

フロートの魔法

何！フローティングでは複数行の省略記号も実現できますか?はい、以下では 3 つのフロートボックスを使用して複数行の省略記号をシミュレートします。まず、右にフロートする 3 つのボックス (テキストボックス、プレースホルダーボックス、カスタムスタイルの省略記号ボックス) を準備します。原理を理解しやすくするために、ボックスに異なる背景色を追加します。

<div class="box">
  <!-- テキスト ボックス -->
  <div class="box__text">テンセントはテクノロジーを通じてインターネットユーザーの生活を豊かにします。当社は、コミュニケーションおよびソーシャル ソフトウェアの WeChat と QQ を通じて、ユーザー間のつながりを促進し、ユーザーがデジタル コンテンツや生活サービスに簡単にアクセスできるように支援します。 </div>
  <!-- プレースホルダーボックス -->
  <div class="box__placeholder"></div>
  <!-- カスタム省略記号ボックス -->
  <div class="box__more">...展開</div>
</div>

<スタイル>
  .box__テキスト{
    幅: 100%;
    高さ: 60px;
    行の高さ: 20px;
    背景色: ピンク;
    フロート: 右;
  }

  .box__プレースホルダー{
    幅: 60ピクセル;
    高さ: 60px;
    背景色: グレー;
    不透明度: 0.8;
    フロート: 右;
  }

  .box__more {
    幅: 60ピクセル;
    テキスト配置: 右;
    背景: 黄色;
    フロート: 右;
  }
</スタイル>

次に、テキストボックスに負の左余白 (プレースホルダーボックスの幅とまったく同じ値) を指定して、位置の調整を開始します。

.box__テキスト{
  左マージン: -60px;
}

これにより、プレースホルダーボックスにスペースが確保され、テキストボックスに合わせて左側にフロートされます。

上の図では、テキストボックスの高さがプレースホルダーボックスの高さよりも小さくなっています。このとき、1 行目の高さはプレースホルダーボックスの高さです。1 行目には余分なスペースはなく、カスタム省略記号ボックスは 2 行目にのみ配置できます。テキストボックスの高さがプレースホルダーボックスの高さよりも大きい場合 (たとえば、テキストが 4 行表示される場合) に何が起こるか想像してみてください。

1 行目の高さはテキストボックスによって拡張されます。このとき、1 行目には余分なスペースがあり、省略記号ボックスが押し込まれる可能性があります。

素晴らしい😊。次に、省略記号ボックスをプレースホルダーボックスと同じ行の右側に配置します。

.box__more {
  位置: 相対的;
  左: 100%;
  変換: translate(-100%, -100%);
}

これを変更し、背景色を削除し、コンテナーをオーバーフロー非表示に設定してから、省略記号ボックスにテキストの色とグラデーションを追加します。

。箱 {
  位置: 相対的;
  オーバーフロー: 非表示;
}

.box__more {
  色: #1890ff;
  背景画像: 線形グラデーション(左、白 40%、RGBA(255, 255, 255, 0.8) 70%、透明 100%);
}

まとめると、ここではフローティングと BFC の原理が実際に使用されています。

外側のボックスはoverflow: hiddenによって BFC を作成します。フローティングボックスの領域は BFC と重なりません。BFC の高さを計算するときは、フローティング要素も計算に含まれます。フローティングボックスは、現在の行の先頭または末尾に浮かびます。いくつかの位置決めテクニックの助けを借りて、複数行の省略記号の効果をシミュレートできます。

フローティングソリューションの利点は非常に明白です。

強力な互換性、すべての主流のPCおよびモバイルブラウザをサポート
グラデーション付きのカスタムテキスト省略記号スタイルをサポート

省略されたスタイル領域は本質的にフローティングボックスであるため、露出しないようにグラデーションを使用する必要があります。このソリューションは、背景色が複雑な領域や、カスタム省略スタイル要件が厳しい領域 (たとえば、省略されたスタイルが矢印または画像として定義されている領域) では機能しなくなります。

省略されたスタイルを完全にカスタマイズする他の方法はありますか?

はい、カスタム省略記号ボックス用のスペースが予約されています。

それでどうやって予約するんですか？ line-clampを使うことができます。 line-clampによって切り詰められた省略記号は、スペースを占有するのに役立ちます...デフォルトの省略記号を何らかの方法で非表示にして、カスタムのフローティングボックスに置き換えることができれば、それで十分です。これが次に紹介する解決策です。

完全にカスタマイズ可能なフロート+ラインクランプ

上記の考えを整理してみましょう。重要なポイントは 3 つあります。

line-clampのデフォルトの省略記号を利用して、カスタム省略記号ボックス用の場所を予約します。位置決め技術を使用して、デフォルトの省略記号を非表示にし、予約された場所をカスタム省略記号ボックスに置き換えます。

一つずつ見ていきましょう。まず、予約スペースです。line line-clamp省略記号のデフォルトサイズはフォントfont-sizeによって影響を受けるため、フォントサイズを調整することで予約スペースのサイズを制御できます。省略記号のサイズがフォントサイズのみによって影響を受けるようにするには、行の高さとテキスト間隔をリセットします。

.box__テキスト{
  位置: 相対的;
  ディスプレイ: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: 垂直;
  フォントサイズ: 60px;
  行の高さ: 0;
  letter-spacing: 0; /* 省略記号がフォントサイズのみの影響を受けるように、行の高さとテキスト間隔をリセットします*/
  color: red; /* デモンストレーションの便宜上、まず省略記号に色を付けましょう */
}

この方法では、テキストボックスのフォントサイズを調整するだけで、予約済みの省略記号ボックスのサイズを制御できます。 font-sizeは継承されるため、フォントサイズをリセットするためのサブボックスを埋め込みます。

<div class="box__text">
    <div class="box__inner">
      テンセントはテクノロジーを通じてインターネットユーザーの生活を豊かにします。当社は、コミュニケーションおよびソーシャル ソフトウェアの WeChat と QQ を通じて、ユーザー間のつながりを促進し、ユーザーがデジタル コンテンツや生活サービスに簡単にアクセスできるように支援します。
    </div>
</div>

<スタイル>
  .box__inner {
    フォントサイズ: 16px;
    行の高さ: 20px;
    色: #000;
    垂直方向の位置合わせ: 上;
    表示: インライン;
  }
</スタイル>

次のステップは、省略記号を非表示にする方法を見つけることです。これは比較的簡単です。透明度または色の透明度を設定できます。

.box__テキスト{
  不透明度: 0;
  色: 透明;
}

省略記号用のスペースが確保できたので、カスタム省略記号ボックスを予約スペースに配置する方法を見つける必要があります。どうすればよいでしょうか?まだ浮いてます。 -webkit-line-clampが設定されているため、テキストボックスを最大の高さまで拡張することはできません。配置を実現するためにフローティングを使用するには、高さを拡張するための追加のコピーをレンダリングします。

拡張された高さのコピーをレンダリングするためのコンテナーとして、絶対位置に配置されたボックスを準備します。

<div class="box__abs">
    <div class="box__fake-text">
      テンセントはテクノロジーを通じてインターネットユーザーの生活を豊かにします。当社は、コミュニケーションおよびソーシャル ソフトウェアの WeChat と QQ を通じて、ユーザー間のつながりを促進し、ユーザーがデジタル コンテンツや生活サービスに簡単にアクセスできるように支援します。
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">...展開</div>
</div>

<スタイル>
  .box__abs {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
  }
</スタイル>

次に、前述の 3 つのフローティングボックスを使用して、複数行のオーバーフロー省略記号を実装します。

.box__偽テキスト{
  幅: 100%;
  左マージン: -60px;
  行の高さ: 20px;
  フロート: 右;
  color: transparent; /* テキストは高さを拡張し、フローティングと連携して複数行のオーバーフロー省略を実現します*/
}

.box__プレースホルダー{
  幅: 60ピクセル;
  高さ: 60px;
  フロート: 右;
}

.box__more {
  位置: 相対的;
  左: 100%;
  変換: translate(-100%, -100%);
  幅: 60ピクセル;
  テキスト配置: 右;
  色: #1890ff;
  フロート: 右;
}

なお、ここでのテキストボックスは高さを拡張するためのもので、表示する必要がないため、色は透明に設定しています。さて、最後のステップは、背景色を削除し、外側のボックスのオーバーフローを非表示に設定することです。これが最終的な効果です。

line-clamp +フローティング方式では、省略記号の完全なカスタマイズを実現できます。行の高さとテキストの間隔をリセットします。カスタム省略記号ボックスの幅を制御するには、外側のボックスのfont-sizeを調整するだけです。省略記号ボックスを任意の矢印、画像、コーナー、またはテキストに置き換えることができます。これで、UIガールの要件を心配する必要がなくなりました。

これで、純粋な CSS カスタム複数行省略記号 (原理から実装まで) に関するこの記事は終了です。CSS カスタム複数行省略記号に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL インデックスの最適化: ページング探索の詳細な紹介

>>: Eclipse は Tomcat を構成しますが、Tomcat には無効なポート解決策があります