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年)ほとんどの主要なブラウザでサポートされています。
-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の省略表示は見栄えを整えるだけでなく、ユーザーエクスペリエンスを向上させるための重要なテクニックです。行数に応じた省略表示を柔軟に使いこなし、実装の手間を軽減しながら、スッキリとしたレイアウトを実現していきましょう!
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion
-webkit-line-clamp
及び-webkit-box-orient
は 2020 年以降のブラウザであれば実装しているみたいですね。