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

2024.05.22

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を超える場合、テキストは「…」で省略されます。

`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-orient を vertical に設定する必要があります。

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

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行を超える場合、それ以降は「…」で省略されます。

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

擬似要素を使用することでも、テキストを省略することができます。
行数分の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を用いると、より高度な制御が可能です。

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

URLをコピーしました！