line-clampで複数行テキストを省略＋フェード演出｜自然で美しいUIを実現するCSS

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webデザインをしていると、テキスト量が不定な場面って多いですよね。

カード型のUIやニュース一覧、商品リスト……本文の長さがバラバラだと、レイアウトが崩れてしまいます。

そんなときに役立つのが、複数行テキストを省略しつつ整える「line-clamp」です。

これまでCSSだけで複数行省略をするには工夫が必要でしたが、
line-clampの登場によって、シンプルかつ安定した表現が可能になりました。

さらに応用として、フェード効果を重ねると自然な省略表現が実現できます。
この記事では、基本の使い方からフェード付き実装まで、段階的に解説していきます。

line-clampとは？

line-clampは、複数行テキストを指定行数で切り詰め、末尾に省略記号を付けるためのCSSプロパティです。

通常は -webkit-line-clamp として利用し、display: -webkit-box; と -webkit-box-orient: vertical; を組み合わせます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

.text { 
 display: -webkit-box; 
 -webkit-line-clamp: 3; 
 -webkit-box-orient: vertical; 
 overflow: hidden; 
} 

このコードで、3行目以降のテキストがカットされ「…」が表示されます。

フェード表現で自然に見せる

ただ単にカットするだけだと、文章が途切れた印象になってしまうこともあります。
そこで活用したいのがフェードエフェクト。

背景と馴染むグラデーションを重ねることで、テキストが自然に消える演出になります。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

.text-fade { 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; 
overflow: hidden; 
position: relative; 
} 
.text-fade::after {
 content: ""; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 width: 100%; 
 height: 2em; 
 background: linear-gradient(to bottom, transparent, white); 
}

この実装では、テキスト下部に透明→背景色のグラデーションを重ねることで柔らかい切れ方になります。

実装ポイント

対応ブラウザと注意点

2025年現在、主要ブラウザで -webkit-line-clamp は安定して利用可能ですが、仕様が完全標準化されていないため prefix が必要です。

まとめ

 

satokotadesignキャンペーン実施中！