【Tailwind CSS】truncateとline-clampで文字を省略する

はじめに

こんにちは、株式会社TOKOSの石津です！
今回はTailwindのtruncateとline-clampを用いてはみ出したテキストを省略する方法を説明していきます。
コーディングをしていくうえで長いタイトル、冗長なパラグラフ、詳細な説明文などを省略して表示したいことがあると思います。
そのような場面でTailwindのtruncateとline-clampクラスを使うことで簡単に文字を省略できます。
この記事ではtruncateとline-clampの使い方と注意点、それぞれのクラスの違いについて説明していきます！

対象読者

• Tailwind CSSを使ったテキストの省略方法を知りたい方
• Tailwind CSSのtruncateとline-clampプロパティの使い方を知りたい方
• Tailwind CSSを使ったWEB開発を行っている方

truncate

truncateの使用方法

<div class="w-[200px]">
  <p class="truncate">200pxまで文字を表示させます</p>
</div>
 
<p class="w-[200px] truncate">200pxまで文字を表示させます</p>
 
<div>
  <p class="truncate">親要素の幅を指定していない場合省略しません</p>
</div>

上記のようにtruncateを使いたい場合、対象となる文字を囲んでいるタグに対してtruncateを当てます。

truncateを使用する際の注意点

truncateを使用する場合の注意点は3つあります。

1つ目は親要素または自分自身に幅を指定する必要があることです。
当たり前のことですが幅を指定しなかった場合、横に広がり続けてしまいます。

2つ目は一行の場合にしか文字を省略できないことです。
これは、truncateユーティリティがwhite-space: nowrap;を使用するためです。
複数行の文字の末尾を省略したい場合は、この後に説明するline-clampを使用してください。

3つ目は子要素に対して一括でtruncateを当てることができないことです。
開発をしていると子要素に対して一括でtruncateを当てたい時が出てくると思います。

しかし、実際に当ててみようとすると以下のようになってしまいます。

<div class="w-[200px]">
  <p class="truncate">200pxまで文字を表示させます</p>
  <p class="truncate">200pxまで文字を表示させます</p>
</div>
 
<div class="w-[200px] truncate">
  <p>200pxまで文字を表示させます</p>
  <p>200pxまで文字を表示させます</p>
</div>
 
<div class="w-[200px]">
  <div class="truncate">
    <p>200pxまで文字を表示させます</p>
    <p>200pxまで文字を表示させます</p>
  </div>
</div>

親要素のwidth指定の方が優先されてしまいます。
子要素に対して一括でtruncateを当てることはできず、一つひとつtruncateを当てていく必要があるようですね。

line-clamp

line-clampの使用方法

<div class="w-[200px]">
  <p class="line-clamp-1">200pxまで文字を表示させます</p>
</div>
 
<p class="w-[200px] line-clamp-1">200pxまで文字を表示させます</p>
 
<div>
  <p class="line-clamp-1">親要素の幅を指定していない場合省略しません</p>
</div>

上記のようにtruncateを使う場合と同様に対象となる文字を囲んでいるタグに対してline-clamp-1を当てます。
truncateと同様に親要素または自身のwidthを指定していない場合、省略されません。

line-clampが優れている点

line-clampがtruncateより優れている点は複数行にわたるテキストの省略ができる点です。
truncateでは一行の場合しか省略できないですが、line-clampでは指定した行数まで折り返してから省略することが可能です。

<div class="w-[200px]">
  <p class="line-clamp-1">1行目で折り返し1行目で折り返し1行目で折り返し1行目で折り返し</p>
 
  <p class="line-clamp-2">2行目で折り返し2行目で折り返し2行目で折り返し2行目で折り返し</p>
 
  <p class="line-clamp-3">
    3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し3行目で折り返し
  </p>
 
  <p class="line-clamp-4">
    4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し4行目で折り返し
  </p>
</div>

line-clampの後に指定する数字の行数で省略してくれます。
しかしline-clampもtruncateと同様に子要素に一括で省略を当てることができないので、こちらも一つひとつ当てていく必要があります。

おわりに

今回の記事ではTailwindのtruncateとline-clampを用いてはみ出したテキストを省略する方法を説明しました。
個人的にはtruncateはline-clamp-1に置き換えてline-clampで統一してもいいのかなと思っています。
truncateもline-clampも親要素または自分自身のwidthを指定しないと省略できないので、widthの指定を忘れないようにしてください！