BLOG

CSSだけで実装！4行目以降を省略して3点リーダーを付ける方法

ニュース一覧やカードUIで「テキストが長すぎてはみ出す問題」、よくありますよね。
実はたった4行のCSSプロパティで、指定行数を超えた部分に…（3点リーダー）を自動付与できます。
今回は-webkit-line-clampを使った最短実装と、ブラウザ互換・fallbackアイデアを紹介します。

1. 基本コード

.multi-ellipsis{
  display:-webkit-box;        /* フレックスの古い表現 */
  -webkit-box-orient:vertical;/* 縦方向に並べる */
  -webkit-line-clamp:4;       /* 4行目以降をカット */
  overflow:hidden;            /* はみ出しを隠す */
}

クラスをテキスト要素（<p> や <div>）に付けるだけでOK。

CSS実装イメージ

2. デモ

<div class="card">
  <h3>タイトル</h3>
  <p class="multi-ellipsis">
    ここに長いテキストが入ります。ここに長いテキストが入ります。ここに長いテキストが入ります。ここに長いテキストが入ります。ここに長いテキストが入ります。
  </p>
</div>

3. ブラウザ対応＆いつから実用できる？

-webkit-line-clamp は 2013 年頃 WebKit 系で先行実装されましたが、当時は Safari 限定で実用にはやや不安定でした。
実戦投入しやすくなったのは以下のタイミング以降です。

ブラウザ サポート開始バージョン 年 備考
Chrome Chrome 54 2016 正式サポート。display:-webkit-box 必須
Safari Safari 9 2015 iOS 9 含む
Edge (Chromium) Edge 79 2020 Chromium ベース移行で対応
Android Chrome v70 以降 2018 モバイルも安定
Firefox Nightly 実装中 2025* *正式リリースは2025 後半予定

実用ラインは 2020 年以降（Safari 14＋Chromium 全対応）。現在はデスクトップ・モバイル合わせて約 95% のブラウザシェアで動作します。Firefox も近々 ship 予定のため、更にカバー率が上がる見込みです。

5. アクセシビリティ小ネタ

  • 全文を読みたいユーザー向けに title="全文表示" を追加
  • カードを <a> リンクで囲む場合は aria-label に全文を入れると親切

まとめ

  • 行数制限は-webkit-line-clampで手軽に実装
  • クロスブラウザ互換は JS や抜粋 でフォロー
  • アクセシビリティも一言添えれば UX を損なわない

ご相談ください

コード最適化やWordPressテーマカスタマイズは
▶ 山キノコロリ WEB事業部 まで！

BACK