CSS辞書

text-overflow

テキスト・フォント

要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis(...)で省略表示したり、clip(切り取り)したりできます。white-space: nowrapやoverflowと組み合わせて使用します。

構文

Syntax
text-overflow: clip | ellipsis | <string>

Tailwindでは

truncateoverflow: hidden + text-overflow: ellipsis + white-space: nowrap
text-ellipsistext-overflow: ellipsis
text-cliptext-overflow: clip

1行省略は truncate 1つで3点セットが揃う。

コード例

1

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
実行結果
長いテキストが省略されます

長いテキストを「...」で省略表示

2

text-overflow: '→';
実行結果
カスタム文字で省略

カスタム文字で省略表示

💡 TIPS

white-space: nowrapとoverflow: hiddenとセットで使用。

🤖 AIがよく間違えるポイント

text-overflow: ellipsisは単独では動きません。overflow: hidden + white-space: nowrapとの三点セットが必須で、AIはこのセットを崩した不完全なコードを出すことがあります。複数行の省略は別の仕組み(-webkit-line-clamp)で、これもdisplay: -webkit-box等との定型セットが必要です。

💬 AIへの頼み方

カードタイトルを1行省略(...)にして。必要な3点セットを漏れなく

本文を3行で省略したい。line-clampの定型セットで実装して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
7+
Safari
1.3+
Edge
12+