text-overflow は「入りきらないテキストをどう見せるか」をコントロールする
UI デザインでは、タイトル・カード・ボタン・リストなど、
テキストが枠からはみ出す場面が必ず発生します。
そのときに使うのが text-overflow。
特に ellipsis（…）で省略する のが最もよく使われるパターンです。
ただし、text-overflow: ellipsis; だけでは動かず、
必ずセットで必要な条件 があるため、
初心者が最初にハマりやすいポイントでもあります。
ここでは CSS と Tailwind CSS の両方で、
例題を交えて丁寧に解説します。
text-overflow の基本：3つの条件が揃わないと動かない
必須条件（超重要）
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
この3つが揃って初めて「…」が表示されます。
CSS の基本形
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Tailwind の基本形
<p class="truncate">
とても長いタイトルがここに入ります…
</p>
Tailwind の truncate は
上記3つをまとめて適用する便利クラスです。
例1：1行だけ省略（最も基本的なパターン）
CSS 版
.single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<p class="single-line">
これはとても長いタイトルで、枠に入りきらない場合に省略されます。
</p>
Tailwind 版
<p class="truncate">
これはとても長いタイトルで、枠に入りきらない場合に省略されます。
</p>
深掘りポイント
truncate は「1行限定」。
複数行の省略には別のテクニックが必要です。
例2：複数行を省略する（line-clamp）
複数行の省略は text-overflow ではできません。-webkit-line-clamp を使います。
CSS 版
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 3行で省略 */
overflow: hidden;
}
<p class="multi-line">
これは複数行のテキストです。長い文章が続く場合に、3行目で省略されます。
</p>
Tailwind 版（line-clamp プラグイン）
Tailwind には line-clamp が用意されています。
<p class="line-clamp-3">
これは複数行のテキストです。長い文章が続く場合に、3行目で省略されます。
</p>
深掘りポイント
複数行省略は UI で非常に多用されます。
カード一覧・ブログ一覧・商品説明などで必須のテクニックです。
例3：カードレイアウトでタイトルを省略する
CSS 版
.card-title {
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="card">
<p class="card-title">とても長い商品タイトルがここに入ります</p>
</div>
Tailwind 版
<div class="p-4 bg-white rounded shadow">
<p class="truncate font-semibold">
とても長い商品タイトルがここに入ります
</p>
</div>
深掘りポイント
カードのタイトルは「1行で切る」ことが多いです。
複数行にすると高さが揃わず、一覧が崩れるためです。
例4：ボタン内のテキストを省略する（スマホUIでよく使う）
CSS 版
.button {
width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<button class="button">
とても長いボタンテキスト
</button>
Tailwind 版
<button class="w-40 truncate bg-blue-600 text-white px-4 py-2 rounded">
とても長いボタンテキスト
</button>
深掘りポイント
スマホではボタン幅が狭いため、
長いテキストを省略して UI を崩さない工夫が必要です。
例5：テーブルのセルで省略（管理画面で必須）
CSS 版
.table-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<td class="table-cell">とても長いメールアドレスやURLなど</td>
Tailwind 版
<td class="max-w-[200px] truncate">
とても長いメールアドレスやURLなど
</td>
深掘りポイント
テーブルは横幅が限られるため、
省略表示は管理画面 UI の基本テクニックです。
text-overflow が効かないときのチェックポイント（ここが一番大事）
1. width が指定されているか
幅が決まっていないと「はみ出す」という概念がないため、省略されません。
2. display が inline のままでは効かない
inline は幅を持たないため、display: inline-block; や block にする必要があります。
Tailwind なら：
<span class="inline-block truncate">...</span>
3. white-space が nowrap になっているか（1行省略の場合）
これがないと折り返されてしまい、省略されません。
4. overflow: hidden が必須
これがないと「はみ出したまま」になります。
実務テンプレート：省略テキストのベストセット
CSS 版（1行）
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Tailwind 版（1行）
<p class="truncate">...</p>
CSS 版（複数行）
.clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Tailwind 版（複数行）
<p class="line-clamp-3">...</p>
まとめ
text-overflow は
「入りきらないテキストをどう見せるか」をコントロールする UI の基本技術 です。
ポイントは次の通りです。
- 1行省略 → truncate（white-space + overflow + ellipsis）
- 複数行省略 → line-clamp
- width が必要
- inline では効かない
- UI（カード・ボタン・テーブル）で必須のテクニック
