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>

クラス	役割
w-48	幅を指定（12rem）
bg-gray-100	背景色
p-4	内側の余白
rounded	角丸
truncate	テキストを省略して「...」を表示

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

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	1行で省略
line-clamp-{n}	n行で省略

---

まとめ

ポイント	内容
クラス名	truncate
機能	テキストを1行で省略し「...」を表示
必須条件	幅の指定が必要
複数行なら	line-clamp-{n} を使う

公式ドキュメント:

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

他のトラブルも解決したい方へ

他のレイアウトトラブルも解決したい方は、30パターンをまとめた逆引きガイドをご覧ください。

TailwindCSS レイアウト逆引きガイド｜よくあるトラブル30選

TailwindCSS レイアウト 効かない原因と解決策を30パターンで網羅。Flexbox、Grid、position、サイズ指定など、カテゴリ別に整理した逆引きリストで、あなたの「効かない」をすぐ ...

続きを見る

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

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

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

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

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

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

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

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