Tailwind CSSで文章を行数制限したい場合はline-clamp-*が便利

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はTailwind CSSを使用しているプロジェクトで、文章を行数制限(超えた部分は3点リーダーで省略)したい場合に使える便利なユーティリティクラス line-clamp-*をご紹介します。

純粋なCSSの場合

純粋なCSSの場合、行数制限をしたい場合は overflow display -webkit-box-orient -webkit-line-clampの4つのプロパティを組み合わせることで設定することができました。

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

しかし、毎度設定することが面倒だったり、メディアクエリを使用してレスポンシブに行数制限しようとすると更に長くなったりと、煩雑になりがちです。

Tailwind CSS場合

Tailwind CSSの場合、先述の4つのプロパティがひとまとまりになったユーティリティクラスとしてline-clamp-*が用意されています。

*に表示させる行数を与えることで、簡単に行数制限をスタイリングすることができます。

例えば3行で制限したい場合は以下の記述で足ります。

<p class="line-clamp-3">...</p>

更にレスポンシブにしたい場合も、ブレイクポイント用のユーティリティクラスと組み合わせることで簡単に実現できます。

<p class="line-clamp-3 md:line-clamp-2">...</p>

ブレイクポイントについては以下の記事もご覧ください。

tech.excite.co.jp

さいごに

今回はTailwind CSSで行数制限したい場合にline-clamp-*が便利であることをご紹介しました。

これからTailwind CSSを活用される方の一助となれば幸いです。

ご精読ありがとうございました。