CSSでシンプルに省略表示を実現する方法 – 1行/複数行対応のテクニック

はじめに

Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。

この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう！

1行の省略表示

CSSでテキストが1行の時に省略表示をするのはtext-overflow: ellipsisプロパティを使用し、シンプルに実装できます。

コード例

.ellipsis-one-line {
  overflow: hidden;          /* 溢れた部分を隠す */
  text-overflow: ellipsis;   /* 溢れた部分を「...」にする */
  white-space: nowrap;       /* 1行で表示 */
}

実装例

この設定で、テキストが1行を超えた場合に自動的に「...」が表示されます。コンテンツの幅が決まっている場面で使いやすいテクニックです。

複数行の省略表示

テキストが複数行にわたる場合、-webkit-line-clampを使って省略表示する方法があります。これは1行目だけでなく、任意の行数に対応することができるので、例えば2行分だけ表示したい場合にも活用できます。

コード例（2行の場合）

.multiline-ellipsis {
  display: -webkit-box;             
  -webkit-box-orient: vertical;      /* 垂直方向に配置 */
  overflow: hidden;                  /* 溢れた部分を隠す */
  text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2;             /* 最大行数を2行に設定 */
}

実装例

これにより、2行を超えた部分が自動的に「...」で省略表示されます。-webkit-line-clampは執筆時現在（2024年）ほとんどの主要なブラウザでサポートされています。

https://caniuse.com/?search=-webkit-line-clamp

-webkit-line-clamp非対応のブラウザの考慮

念の為、非対応ブラウザの対応として、CSSのmax-heightとoverflow: hiddenを活用する方法があります。この方法により、省略記号は表示されませんが、指定行数分の高さでコンテンツを制限し、全てのブラウザで似た挙動を実現することができます。

コード例（2行の場合:他ブラウザのフォールバックを併記）

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;                  /* 溢れた部分を隠す */
  text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
  -webkit-line-clamp: 2;             /* 最大行数を2行に設定 */

  /* 非対応ブラウザ向けのフォールバック */
  max-height: calc(1.5em * 2);       /* 行の高さ×行数で高さを設定 */
}

上記の例では、-webkit-line-clamp対応ブラウザでは、複数行省略表示が行われます。一方、-webkit-line-clamp非対応のブラウザでは、max-heightにより指定行数を超えたテキストが表示されないようになり、コンテンツの整った表示が可能です。

この方法を使うことで、複数行の省略表示をすべてのブラウザで一貫して提供できるため、クロスブラウザ対応が簡単に実現できます。

1行も複数行も一貫して実装する方法

複数行に対応する-webkit-line-clampを利用して、1行省略表示も統一的に実装することができます。これにより、1行と複数行の両方に対応したCSSクラスを定義でき、コードの一貫性を保つことが可能です。

コード例（1行に省略表示を統一）

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /* ここを2や3に変更することで、行数を指定 */
  max-height: calc(1.5em * 1);
}

この方法を使えば、1行と複数行で同じクラスを活用することができ、メンテナンス性が向上します。行数だけを変更すればよいため、プロジェクト内でスタイルの統一性も保てます。

まとめ

今回は、CSSでの省略表示を行う方法として、1行と複数行に対応した実装方法を紹介しました。text-overflow: ellipsisによるシンプルな1行省略と、-webkit-line-clampを利用した複数行の省略表示を組み合わせることで、どちらのケースにも一貫性のあるスタイルを適用できます。

CSSの省略表示は見栄えを整えるだけでなく、ユーザーエクスペリエンスを向上させるための重要なテクニックです。行数に応じた省略表示を柔軟に使いこなし、実装の手間を軽減しながら、スッキリとしたレイアウトを実現していきましょう！