【CSS】-webkit-line-clamp で文章の行数を制限する。正しい設定法と効かない時の対処法

p要素などの中に長い文章を書きこむ時、行数が多すぎるとレイアウトが崩れてしまうことがあります。

指定した行数以上は「…」を表示して以下省略するためのプロパティとして、-webkit-line-clamp が用意されています。

このプロパティ、うわべの機能だけ知っている状態で雑に使うと、全く効かないことがままあります。正しい使い方をまとめました。

-webkit-line-clamp 概要

-webkit-line-clamp は CSS のプロパティで、ブロックコンテナーの内容を指定した行数に制限することができます。

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp より引用

書き方

以下はサンプルコードと、実際に適用した場合の動作サンプルです。

p.clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /*3行以上の内容は切る*/
    overflow: hidden;
}

line-clamp 不使用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien sed scelerisque tincidunt. Suspendisse quis justo id sem sagittis tincidunt nec vel ante. Donec vel lorem id augue ullamcorper mollis at quis nisl. Phasellus sit amet ex quis erat vestibulum vestibulum. Donec ac massa vitae erat congue fringilla sit amet accumsan odio. Proin magna tellus, porttitor et urna quis, vulputate vehicula ante. Praesent vitae nibh ut tellus tempus varius a sed arcu. Nam lacinia pellentesque turpis, quis pulvinar augue posuere nec. Aenean placerat ipsum non iaculis varius. Vivamus rhoncus enim ex, sit amet ultricies erat sagittis eu. Nulla ultrices diam facilisis, facilisis dolor mollis, ullamcorper nibh.

line-clamp 使用

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien sed scelerisque tincidunt. Suspendisse quis justo id sem sagittis tincidunt nec vel ante. Donec vel lorem id augue ullamcorper mollis at quis nisl. Phasellus sit amet ex quis erat vestibulum vestibulum. Donec ac massa vitae erat congue fringilla sit amet accumsan odio. Proin magna tellus, porttitor et urna quis, vulputate vehicula ante. Praesent vitae nibh ut tellus tempus varius a sed arcu. Nam lacinia pellentesque turpis, quis pulvinar augue posuere nec. Aenean placerat ipsum non iaculis varius. Vivamus rhoncus enim ex, sit amet ultricies erat sagittis eu. Nulla ultrices diam facilisis, facilisis dolor mollis, ullamcorper nibh.

こんな具合に、3行以降の内容は「…」で省略されます。領域も取りません。

効かない時の対処法

サンプルコードではしれっと4行cssを書いていますが、このうち1つでも欠けると-webkit-line-clampは動作しません。

具体的には、-webkit-line-clampを設定したい要素に、以下の3項目が揃っている必要があります。

display-webkit-box か -webkit-inline-box
-webkit-box-orientvertical
overflowhidden

display-webkit-box-orient のどちらかが欠けている場合は、指定しなかった場合と比べて全く表示が変化しません。

以下はoverflowを指定しなかった場合のサンプルです。(レイアウトが崩れる可能性があるためスポイラーにしています)

Spoiler

overflowを指定しなかった場合

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien sed scelerisque tincidunt. Suspendisse quis justo id sem sagittis tincidunt nec vel ante. Donec vel lorem id augue ullamcorper mollis at quis nisl. Phasellus sit amet ex quis erat vestibulum vestibulum. Donec ac massa vitae erat congue fringilla sit amet accumsan odio. Proin magna tellus, porttitor et urna quis, vulputate vehicula ante. Praesent vitae nibh ut tellus tempus varius a sed arcu. Nam lacinia pellentesque turpis, quis pulvinar augue posuere nec. Aenean placerat ipsum non iaculis varius. Vivamus rhoncus enim ex, sit amet ultricies erat sagittis eu. Nulla ultrices diam facilisis, facilisis dolor mollis, ullamcorper nibh.

3行目には省略の記号が挿入されていますが、その後の文章も表示されてしまっています。領域サイズは3行分しかとっていないので、その後ろの文章ははみ出してしまいます。

なお、-webkit-box-orientについては標準化の予定がない deprecated (非推奨)のプロパティである、とドキュメントに記載がありますが、現状他に適切な設定がありませんので、-webkit-line-clamp専用のプロパティだと思っておけば良いでしょう。

今後の更新でこの辺りの記述が変わるかもしれません。

https://developer.mozilla.org/ja/docs/Web/CSS/box-orient

公式ドキュメント

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp を参照ください。