text-overflow プロパティ
最終更新：2026-09-13
text-overflow text-overflow プロパティ
text-overflow プロパティは、テキストがコンテナからあふれたときの表示を制御します。最も一般的な使い方は、overflow: hidden と white-space: nowrap と組み合わせて、单行テキストに省略記号を付けることです。clip（切り捨て）と ellipsis（…）の 2 つのモードをサポートし、UI デザインで長いテキストを扱う際の標準的な手段です。
| カテゴリ | |
|---|---|
| 初期値 | clip |
| 継承 | いいえ |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
text-overflow: [ clip | ellipsis | <string> ]{1,2};⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
clip | ellipsis | キーワード | テキスト溢れの処理：clip または ellipsis |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-overflow | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| すべての主要ブラウザーでサポート | |||||
重要： text-overflow は overflow: hidden（または scroll/auto）と white-space: nowrap と組み合わせたときだけ機能し、単独では無効です。
ヒント： 複数行の省略記号は、-webkit-line-clamp、display: -webkit-box、-webkit-box-orient: vertical を組み合わせる必要があり、WebKit 独自のプロパティです。
❓ よくある質問
Qtext-overflow で省略記号が表示されないのはなぜですか？
Aoverflow: hidden と white-space: nowrap の両方が設定され、コンテナに明確な幅の制限があるか確認してください。これらの条件のいずれかが欠けても、溢れる省略は発生しません。
Q複数行テキストに省略記号を付けるには？
A標準 CSS は单行の省略のみ対応しています。複数行には、-webkit-line-clamp（行数を制限）を display: -webkit-box と overflow: hidden と組み合わせて使います。現在の主流ブラウザはすべて対応しています。
Q单行テキストの省略記号はどう書きますか？
A3 つのプロパティが揃う必要があります。white-space: nowrap（折り返し禁止）、overflow: hidden（溢れを隠す）、text-overflow: ellipsis（省略記号を表示）。コンテナは固定幅か制限された幅である必要があり、3 条件すべてが必要です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
