純粋な CSS で「テキストオーバーフローの切り捨てと省略」を実装するいくつかの方法

私たちの日常的な開発作業では、テキストのオーバーフロー、切り捨て、省略は、考慮する必要がある非常に一般的なビジネスシナリオの詳細です。「一般的」に見えますが、実装にはさまざまな違いがあります。単一行の切り捨てですか、それとも複数行の切り捨てですか?複数行の切り捨て判定は行数で判断するのでしょうか、それとも高さで判断するのでしょうか?これらの問題の解決策は何でしょうか?それらの違いと、さまざまなシナリオへの適応性は何ですか?

一般的に、このようなテキスト切り捨て効果を実現する場合、次のことが期待されます。

主要ブラウザとの互換性とサポートが良好
さまざまな幅に合わせて調整できるレスポンシブカットオフ
省略記号はテキストが範囲を超えた場合にのみ表示され、それ以外の場合は表示されません。
省略記号の位置がちょうどよく表示される

上記の基準に基づいて、コーディングの練習を通じていくつかの答えを示します。

単一行テキストオーバーフロー省略記号

コア CSS ステートメント

overflow: hidden; (テキストの長さが指定された幅を超える場合、超過分は非表示になります)
white-space: nowrap; (テキストを1行で表示し、折り返せないように設定します)
text-overflow: ellipsis; (テキストがオーバーフローした場合、切り取られたテキストを表すために省略記号が表示されることを指定します)

アドバンテージ

主要ブラウザとの互換性とサポートが良好
さまざまな幅に合わせて調整できるレスポンシブカットオフ
省略記号はテキストが範囲を超えた場合にのみ表示され、それ以外の場合は省略記号は表示されません。
省略記号の位置がちょうどよく表示される

欠点

単一行テキストの切り捨てのみがサポートされており、複数行テキストの切り捨てはサポートされていません。

適用可能なシナリオ

1行のテキストがオーバーフローして省略記号が表示される場合に適用可能

デモ

<div class="demo">
      ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。</div>

.デモ{
  空白: ラップなし;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
}

効果例

複数行テキストのオーバーフロー省略記号 (-webkit-line-clamp)

コア CSS ステートメント

overflow: hidden; (テキストが指定された幅を超え、コンテンツが非表示になります)
-webkit-line-clamp: 2; (ブロック要素内に表示されるテキストの行数を制限するために使用されます。2 は最大 2 行が表示されることを意味します。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります)
display: -webkit-box; (オブジェクトを弾性ボックスモデルとして表示するには、-webkit-line-clamp: 2; と組み合わせて使用します)
-webkit-box-orient: vertical; (-webkit-line-clamp: 2; と組み合わせて使用し、フレックスボックスオブジェクトの子要素の配置を設定または取得します)
text-overflow: ellipsis; (テキストが複数行の場合、範囲外のテキストを非表示にするには省略記号「...」を使用します)

アドバンテージ

さまざまな幅に合わせて調整できるレスポンシブカットオフ
省略記号はテキストが範囲を超えた場合にのみ表示され、それ以外の場合は省略記号は表示されません。
ブラウザはこれをネイティブに実装しているので、省略記号は正しい位置に表示されます。

欠点

一般的な互換性: -webkit-line-clamp プロパティは、WebKit カーネルを搭載したブラウザでのみサポートされます。

適用可能なシナリオ

モバイルデバイスのブラウザはWebKitカーネルに基づいているため、モバイルページに適しています。

デモ

<div class="demo">
      ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。

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

効果例

複数行テキストのオーバーフロー省略記号（疑似要素 + 配置）

コア CSS ステートメント

position: relative; (疑似要素の絶対配置)
overflow: hidden; (テキストが指定された幅を超え、コンテンツが非表示になります)
position: absolute; (省略記号に絶対位置を指定します)
line-height: 18px; (要素の高さと組み合わせて、高さが固定されている場合は、行の高さを設定して表示される行数を制御します)
height: 36px; (現在の要素の高さを設定)
::after {} (省略記号スタイルの設定)
word-break: break-all; (テキストに英語が含まれている場合、新しい行に分割するときに単語を分割できます)

アドバンテージ

主要ブラウザとの互換性とサポートが良好
さまざまな幅に合わせて調整できるレスポンシブカットオフ

欠点

テキストの長さを認識できません。テキストが範囲をオーバーフローしているかどうかに関係なく、省略記号は常に表示されます。
表示が適切でない場合があります。テキストの半分が隠れたり、テキストが密着していない場合があります。

適用可能なシナリオ

テキストコンテンツが多く、テキストコンテンツがコンテナを超えることは確実です

デモ

<div class="demo">
      寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光 寝床の前の月光

.デモ{
    位置: 相対的;
    行の高さ: 18px;
    高さ: 36px;
    オーバーフロー: 非表示;
    単語区切り: 全区切り;
}
.demo::after {
    コンテンツ："...";
    フォントの太さ:太字;
    位置:絶対;
    下:0;
    右:0;
    パディング:0 20px 1px 45px;
    
    /* 表示効果を高めるために */
    背景: -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%、白);
}

効果例

複数行テキストのオーバーフロー省略記号 (Float)

コア CSS ステートメント

line-height: 20px; (要素の高さと組み合わせて、高さが固定されている場合は、行の高さを設定して表示される行数を制御します)
overflow: hidden; (テキストが指定された幅を超え、コンテンツが非表示になります)
float: right/left; (要素のフローティング特性を利用して実装)
position: relative; (テキストがオーバーフローしたときに省略記号を表示する効果を実現するために、省略記号の位置を自身の位置に応じて移動します)
word-break: break-all; (テキストに英語が含まれている場合、単語は改行で分割されます)

アドバンテージ

主要ブラウザとの互換性とサポートが良好
さまざまな幅に合わせて調整できるレスポンシブカットオフ
省略記号はテキストが範囲を超えた場合にのみ表示され、それ以外の場合は省略記号は表示されません。

欠点

省略記号は正しく表示されない場合があり、テキストの半分を覆ったり、テキストにぴったりと収まらなかったりすることがあります。

適用可能なシナリオ

テキストコンテンツが多く、テキストコンテンツがコンテナを超えることは確実です

デモ

<div class="demo">
      <div class="text">
        ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。 ベッドの前では月明かりが明るい。
</div>

.デモ{
  高さ: 40px;
  行の高さ: 20px;
  オーバーフロー: 非表示;
}
.デモ.テキスト{
  フロート: 右;
  左マージン: -5px;
  幅: 100%;
  単語区切り: 全区切り;
}
.demo::before {
  フロート: 左;
  幅: 5px;
  コンテンツ： "";
  高さ: 40px;
}
.demo::after {
  フロート: 右;
  コンテンツ： "...";
  高さ: 20px;
  行の高さ: 20px;
  右パディング: 5px;
  テキスト配置: 右;
  幅: 3em;
  左マージン: -3em;
  位置: 相対的;
  左: 100%;
  上: -20px;
  右パディング: 5px;
    
  /* 表示効果を高めるために */
  背景: -webkit-gradient(
    リニア、
    左上、
    右上、
    (rgba(255, 255, 255, 0))から、
    （白）に、
    カラーストップ(50%、白)
  );
  背景: -moz-linear-gradient(
    右へ、
    RGBA(255, 255, 255, 0)、
    白 50%、
    白
  );
  背景: -o-線形グラデーション(
    右へ、
    RGBA(255, 255, 255, 0)、
    白 50%、
    白
  );
  背景: -ms-linear-gradient(
    右へ、
    RGBA(255, 255, 255, 0)、
    白 50%、
    白
  );
  背景: 線形グラデーション(
    右へ、
    RGBA(255, 255, 255, 0)、
    白 50%、
    白
  );
}

効果例

これで、純粋な CSS で「テキストオーバーフロー、切り捨て、省略」を実装するいくつかの方法についての記事は終了です。CSS テキストオーバーフロー、切り捨て、省略に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: JavaScript配列の一般的なメソッドの詳細な説明

>>: イラスト風ウェブサイトホームページデザインウェブサイトデザインの新トレンド