ISSEN 
はじめに
こんちには、株式会社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を使用する場合の注意点は三つあります。
一つ目は親要素または自分自身に幅を設ける必要があることです。
当たり前のことですが幅を設けなかった場合、横に広がり続けてしまいます。
二つ目は一行の場合にしか文字を省略できないことです。
これは、truncateユーティリティが white-space: nowrap; を使用するためです。
複数行の文字の末尾を省略したい場合は、この後に説明するline-clampを使用してください。
三つ目は子要素に対して一括で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の指定を忘れないようにしてください！
