• TOP
• CSS
• 【line-clamp】CSSで行数制限する方法

2022.07.20

【line-clamp】CSSで行数制限する方法

WordPress等での構築の場合PHP側で文字数制限して出力することはありますが、行数で制限することはありません。

CSSだけで実装出来るline-clampは、カード型の一覧のようなレイアウトを組む時に便利なので、最近知ったCSSで一番役に立ってます。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; //行数
  -webkit-box-orient: vertical;
  overflow: hidden; 
  text-overflow: ellipsis; //行末を省略文字にする
}

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

• 前の記事へ
• 次の記事へ