p要素などの中に長い文章を書きこむ時、行数が多すぎるとレイアウトが崩れてしまうことがあります。
指定した行数以上は「…」を表示して以下省略するためのプロパティとして、-webkit-line-clamp が用意されています。
このプロパティ、うわべの機能だけ知っている状態で雑に使うと、全く効かないことがままあります。正しい使い方をまとめました。
-webkit-line-clamp 概要
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp より引用
-webkit-line-clampは CSS のプロパティで、ブロックコンテナーの内容を指定した行数に制限することができます。
書き方
以下はサンプルコードと、実際に適用した場合の動作サンプルです。
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行以降の内容は「…」で省略されます。領域も取りません。
効かない時の対処法
サンプルコードではしれっと４行cssを書いていますが、このうち１つでも欠けると-webkit-line-clampは動作しません。
具体的には、-webkit-line-clampを設定したい要素に、以下の３項目が揃っている必要があります。
| display | -webkit-box か -webkit-inline-box |
| -webkit-box-orient | vertical |
| overflow | hidden |
display、-webkit-box-orient のどちらかが欠けている場合は、指定しなかった場合と比べて全く表示が変化しません。
以下はoverflowを指定しなかった場合のサンプルです。(レイアウトが崩れる可能性があるためスポイラーにしています)
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.
３行目には省略の記号が挿入されていますが、その後の文章も表示されてしまっています。領域サイズは３行分しかとっていないので、その後ろの文章ははみ出してしまいます。
なお、
-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 を参照ください。
