【CSS】テキストの行数を制限し、文末3点リーダーにする方法

  • URLをコピーしました!

こんにちは。すずきです。

  • テキストが長すぎてレイアウトが崩れる。
  • スマホでの表示が乱れて読みにくい。
  • テキスト省略の方法を知りたい。
  • 複数行のテキストを省略したい。

本記事では、このような悩みにお答えします。

デバイス幅によってテキストを省略できるようになることで見やすいサイトになり、ユーザーフレンドリーなサイトになります。

テキストの省略はJavaScriptでも実装できますが、CSSでも簡単に実装できます。

この記事を読むことでテキストの文末を簡単に省略できるようになり、ユーザーフレンドリーなサイトを制作できるようになります。

それでは早速解説していきます。

目次

省略の方法① text-overflow: ellipsis;

テキスト省略で一番よく使われるのはtext-overflow プロパティです。

text-overflow プロパティは、ブロックの内容がそのブロックを超えた場合、どのように表示するかを制御します。
このプロパティに ellipsis を設定すると、超えたテキストは「…」で省略されます。

具体的な設定方法は以下のようになります。

See the Pen text-overflow-ellipsis by すずき (@k-suzuki3533) on CodePen.

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* または任意の幅 */
}

この設定により、p の幅が200pxを超える場合、テキストは「…」で省略されます。

MDN Web Docs
text-overflow - CSS: カスケーディングスタイルシート | MDN text-overflow は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字...

text-overflow の注意点

text-overflow: ellipsis; が正しく機能するためには、いくつかの条件が必要です。

  • overflow プロパティが hidden または scroll であること。
  • white-space プロパティが nowrap であること。

これらの条件が揃って初めて、text-overflow プロパティが機能します。

また、text-overflow プロパティは一行のテキストにしか適用できません。

複数行のテキストにはこの方法が適用できないため、複数行のテキストを省略する場合は他の方法が必要です。

省略の方法② -webkit-line-clamp

WebKitベースのブラウザ(Chrome、Safariなど)では、-webkit-line-clamp プロパティを使用して複数行のテキストを省略できます。

このプロパティを使用するには、display プロパティを -webkit-box または -webkit-inline-box に設定し、-webkit-box-orientvertical に設定する必要があります。

具体的なコードは以下のようになります。

See the Pen -webkit-line-clamp by すずき (@k-suzuki3533) on CodePen.

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 表示する行数 */
  overflow: hidden;
}

この設定により、テキストが3行を超える場合、それ以降は「…」で省略されます。

MDN Web Docs
-webkit-line-clamp - CSS: カスケーディングスタイルシート | MDN -webkit-line-clamp は CSS のプロパティで、ブロックコンテナーの内容を指定した行数に制限することができます。

省略の方法③ 疑似要素を使用

擬似要素を使用することでも、テキストを省略することができます。
行数分のmax-heightを指定し、overflow: hidden;でそれ以上のテキストを非表示にします。

そして、擬似要素で「…」を表示させます。

具体的なコードは以下のようになります。

See the Pen multi-line-ellipsis by すずき (@k-suzuki3533) on CodePen.

.multi-line-ellipsis {
  position: relative;
  max-height: calc(1.5em * 3);/* 行間 x 行数 */
  overflow: hidden;
}

.multi-line-ellipsis:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 背景色 */
}

省略の方法④ JavaScript

最後にJavaScriptを使用してテキストを省略する方法です。
この方法は、特に動的なコンテンツや複雑なレイアウトに適しています。

JavaScriptを使用すると、テキストの長さや要素のサイズに応じて動的にテキストを省略できます。

具体的なコードは以下になります。

See the Pen js-truncate by すずき (@k-suzuki3533) on CodePen.

document.addEventListener("DOMContentLoaded", function() {
  function truncateText(element, maxLength) {
    let truncated = element.innerText;

    if (truncated.length > maxLength) {
      truncated = truncated.substr(0, maxLength) + '...';
    }
    element.innerText = truncated;
  }

  const elements = document.querySelectorAll('.js-truncate');
  elements.forEach(function(element) {
    truncateText(element, 100); // 最大100文字まで表示
  });
});

このJavaScript関数truncateTextは、指定されたセレクタ(.js-truncate)と最大文字数(100)を受け取り、テキストを省略します。

おわりに

この記事では、テキストの省略に関する方法を詳しく解説しました。

どの方法を選ぶべきか?

  • 初学者や簡単なケース: text-overflowが最も簡単で手軽です。
  • 複数行のテキスト: -webkit-line-clampや疑似要素を用いた方法が有用ですが、ブラウザの互換性に注意が必要です。
  • 動的なコンテンツや複雑なレイアウト: JavaScriptを用いると、より高度な制御が可能です。

テキストの省略はサイトの見やすさなどにも影響します。
今回紹介した方法を使って、ぜひ試してみてください。

Web制作に使えるおすすめの書籍

私が実際に購入して役に立った書籍を紹介します。
気になる本があればぜひ読んでみてください!

  • URLをコピーしました!
目次