TailwindCSSのtruncateとは？テキスト省略を1クラスで実現する方法

こんなUI、見たことありませんか？

カードやリスト内で、長いテキストが ... で省略されているUI。

よく見かけますよね。

これ、どのクラスで実現するんでしょうか？

今回は、このUIを実現するクラスについて一緒に勉強してみましょう。

その前に、私の体験談を紹介させてください

私はこの記事を執筆するまで、truncate について認識がありませんでした。冒頭の画像を見て、公式を調べて、初めて認識したんです。

正直に言うと、画像を見てから認識するまでがとても大変でした。「もっと簡単に知ることができたらいいのに」と思いました。

その体験が、この記事を執筆するきっかけとなりました。同じように悩んでいる方の役に立てれば嬉しいです。

使うクラス：truncate

このUIは truncate というクラスで実現できます。

公式の解説はここにありました。

• 公式ドキュメント: https://tailwindcss.com/docs/text-overflow

サンプルコード

それではサンプルコードをお見せします。私ならこう書きます。

<div class="w-48 bg-gray-100 p-4 rounded">
  <p class="truncate">
    この長いテキストは省略されて「...」が表示されます
  </p>
</div>

結果を確認してみましょう。いつも通りTailwind Playで確認してみます。

ステップバイステップ解説

それではサンプルコードについて解説していきます。

各クラスの役割

<div class="w-48 bg-gray-100 p-4 rounded">
  <p class="truncate">...</p>
</div>

ポイント：実は幅の指定が必要

truncate だけでは動きません。実は、親要素または自身に幅を指定する必要があります。

<!-- NG: 幅がないので省略されない -->
<p class="truncate">長いテキスト...</p>

<!-- OK: 幅を指定 -->
<p class="truncate w-48">長いテキスト...</p>

<!-- OK: 親要素に幅がある -->
<div class="w-48">
  <p class="truncate">長いテキスト...</p>
</div>

補足：truncate が内部でやっていること

興味がある方向けに、truncate が内部で適用しているCSSを紹介します。

overflow: hidden;        /* はみ出た部分を隠す */
text-overflow: ellipsis; /* 省略記号「...」を表示 */
white-space: nowrap;     /* 改行させない */

この3つをセットで書く必要がありますが、TailwindCSSでは truncate 1つで済みます。

こんな場合はどうする？

複数行のテキストを「3行まで表示して、それ以上は省略」したい。

truncate でできるでしょうか？

答え

truncate は1行専用です。複数行の省略には line-clamp を使います。

<p class="line-clamp-3">
  この長いテキストは3行まで表示されて、
  それ以上は省略されます。
  3行を超える部分には「...」が表示されます。
</p>

まとめ

公式ドキュメント:

• truncate: https://tailwindcss.com/docs/text-overflow
• line-clamp: https://tailwindcss.com/docs/line-clamp

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）