1. ホーム
  2. CSS

【CSS】-webkit-line-clamp で複数行のテキストを省略（…）する方法

Share

記事一覧のカードで説明文の行数をそろえたい、長い本文を「3行まで表示して残りは…で省略」したい——こうした「複数行のテキストを指定した行数で切り詰める」処理は、CSS の -webkit-line-clamp で実現できます。1行の省略でおなじみの text-overflow: ellipsis は1行にしか効きませんが、-webkit-line-clamp なら好きな行数で打ち切って末尾に三点リーダー（…）を付けられます。この記事では、必ずセットで書くプロパティ、行数の指定方法、うまく効かないときの原因までを、実際に試せるデモつきで解説します。

複数行の省略はなぜ難しいのか

1行だけの省略なら、white-space: nowrap と overflow: hidden、text-overflow: ellipsis の3点セットで簡単に実現できます。しかし、これは折り返さない1行が前提のテクニックで、2行以上のテキストには使えません。「N行で切って…を付ける」という指定が、長らく標準の CSS には存在しなかったのです。

そこで広く使われてきたのが -webkit-line-clamp です。名前に -webkit- が付いているとおり元は WebKit（Safari や Chrome）独自の機能ですが、現在は主要なブラウザで動作し、複数行の省略表示の定番になっています。

基本の書き方（4点セット）

-webkit-line-clamp は単体では効きません。次の4つのプロパティをセットで指定して初めて機能します。どれか1つでも欠けると省略されないので、まとめて覚えてしまいましょう。

プロパティ役割
display: -webkit-box;要素を旧式の flexbox（webkit box）として扱う
-webkit-box-orient: vertical;ボックス内を縦方向に並べる
-webkit-line-clamp: 3;表示する行数（この例では3行）
overflow: hidden;指定行数を超えた部分を隠す

実際に動かしてみましょう。次のデモは、カードの説明文を3行で打ち切る例です。CSS の -webkit-line-clamp の数字を 2 や 4 に変えると、表示される行数が変わり、末尾の「…」の位置も追従します。

<div class="card">
  <h3>記事タイトルが入ります</h3>
  <p class="excerpt">これはカードの説明文です。長い文章でも指定した行数を超えた部分は自動的に隠され、末尾に三点リーダー（…）が表示されます。カードの高さをそろえたいときに便利で、JavaScript を使わずに CSS だけで実現できます。</p>
</div>

.card {
  width: 260px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.excerpt {
  display: -webkit-box;        /* 必須：ボックスとして扱う */
  -webkit-box-orient: vertical; /* 必須：縦方向に並べる */
  -webkit-line-clamp: 3;        /* 表示する行数 */
  line-clamp: 3;                /* 標準プロパティ（対応が進行中） */
  overflow: hidden;             /* 必須：あふれた分を隠す */
}
Preview

テキストが指定行数に収まる短い場合は、省略されず全文がそのまま表示されます。長いときだけ切り詰められるので、内容の長さがまちまちなカード一覧などで、高さをそろえるのに役立ちます。

標準プロパティ line-clamp について

ベンダープレフィックスの付かない標準の line-clamp プロパティも策定が進んでおり、対応ブラウザが増えつつあります。現時点では、互換性を保つためにプレフィックス付きと標準の両方を書いておくのが安全です。上のデモでも、-webkit-line-clamp: 3; と line-clamp: 3; を並べて指定しています。

将来的に標準プロパティが広く使えるようになっても、display: -webkit-box と -webkit-box-orient: vertical の組み合わせはしばらく必要になる見込みです。現状は「4点セット＋標準プロパティ」で書いておけば、幅広い環境で意図どおりに表示されます。

省略されないときに確認すること

-webkit-line-clamp を書いたのに省略されない、という相談はよくあります。原因はたいてい決まっているので、順に確認していきましょう。

4点セットのどれかが抜けている

もっとも多いのが、display: -webkit-box や -webkit-box-orient: vertical、overflow: hidden の書き忘れです。-webkit-line-clamp だけを書いても効きません。とくに overflow: hidden が無いと、行数で区切られてもあふれた部分が見えてしまいます。前述の4つが揃っているか、まず確認してください。

display が別の値で上書きされている

その要素に対して、別の CSS で display: flex や display: block が後から当たっていると、display: -webkit-box が打ち消されて機能しません。開発者ツールで、実際に適用されている display の値が -webkit-box になっているかを見てみましょう。ユーティリティ系のクラスが display を上書きしていることもあります。

高さが固定されている

-webkit-line-clamp は「行数」で切り詰める仕組みなので、要素に height を固定で指定すると噛み合わないことがあります。基本的には高さを固定せず、行数の指定に任せるのがきれいに動くコツです。子要素に padding や margin が入っていると行の折り返し計算がずれることもあるため、省略したいテキスト自体（段落など）に直接指定するのが確実です。

まとめ

複数行のテキストを指定した行数で省略するには、-webkit-line-clamp を使います。単体では効かず、display: -webkit-box・-webkit-box-orient: vertical・-webkit-line-clamp: 行数・overflow: hidden の4点セットで指定するのが基本です。標準の line-clamp も併記しておくと安心です。うまく省略されないときは、4点セットの抜け、display の上書き、高さの固定を疑いましょう。JavaScript を使わずに、カード一覧などの見た目を手軽に整えられる便利なテクニックです。

参考ページ