2024/12/12

CSSでテキストを「...」で省略表示するシンプルな方法

CSSでテキストを「…」で省略表示するシンプルな方法

長いテキストを省略表示したいときに、CSSだけで簡単に「…」を付ける方法をご紹介します。この方法は、特定の行数でテキストを切り取るシンプルな実装です。

実装方法

以下のCSSコードをコピーして使用してください。

.text-truncate {
  overflow: hidden; /* 表示領域を超えたテキストを非表示にする */
  display: -webkit-box; /* 行数制御を有効にする */
  -webkit-box-orient: vertical; /* テキストを縦方向に並べる */
  -webkit-line-clamp: 3; /* 最大3行に制限 */
}

使用例

以下のHTML構造にCSSクラスを追加するだけで機能します。

<div class="text-truncate">
  長いテキストをここに挿入してください。このテキストは、3行を超えると「...」で省略されます。これにより、限られたスペースでコンテンツを簡潔に表示することができます。
</div>

試しに4行が入っている div を作っています。

1行目
2行目
3行目
4行目

3行目の最後に「…」が付くようになります。

動作の仕組み

overflow: hidden: コンテンツがボックスの高さを超えた場合に非表示にします。
display: -webkit-box: ボックス内のテキストを複数行で表示します。
-webkit-box-orient: vertical: テキストを縦方向に配置します。
-webkit-line-clamp: 表示する最大行数を設定します（例: 3行）。

注意点

この方法は現在、一部のブラウザ（主にWebkit系）でのみ動作します。最新ブラウザをターゲットにしている場合には問題ありませんが、古いブラウザのサポートを検討する際には他の方法を検討してください。

参考資料

MDN Web Docs: -webkit-line-clamp -webkit-line-clamp の公式ドキュメント。使用方法やブラウザ対応状況について詳しく解説されています。
MDN Web Docs: overflow CSSプロパティ overflow に関する詳細情報。要素の表示領域を超えた内容をどう処理するかを制御します。
MDN Web Docs: display display プロパティの公式ドキュメント。-webkit-box の意味と使い方を確認できます。