word-wrap プロパティ
最終更新：2026-09-13
word-wrap word-wrap プロパティ
word-wrap プロパティは overflow-wrap の別名で、長い単語や URL がコンテナ幅を超えたときに単語内部で改行してよいかを制御します。折り返せない長い文字列がコンテナからあふれるのを防ぐために設計され、テキスト溢れ問題の定番ツールです。現代の CSS 仕様では overflow-wrap への移行を推奨しています。
| カテゴリ | |
|---|---|
| 初期値 | normal |
| 継承 | はい |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
word-wrap: normal | break-word;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
normal | break-word | キーワード | 長い単語の折り返し（overflow-wrap の別名） |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| word-wrap | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v10 |
| すべての主要ブラウザーでサポート | |||||
ヒント： word-wrap: break-word は単語境界での改行を優先し、単一の単語がコンテナ幅を超える場合のみ単語内部で改行します。
重要： word-wrap は overflow-wrap の歴史的別名で、両者は完全に等価です。現代のプロジェクトでは仕様に合わせて overflow-wrap を使うことを推奨します。
❓ よくある質問
Qword-wrap と overflow-wrap に違いはありますか？
A違いはありません。両者は完全に等価です。word-wrap は初期のブラウザ実装による非標準の名前で、後に規格に取り込まれ overflow-wrap に改名されましたが、互換性のために word-wrap が別名として残されています。
Qword-wrap: break-word と word-break: break-all の違いは？
Aword-wrap: break-word は単語を可能な限り保持し、必要なときだけ改行します。word-break: break-all は単語の完全性を考慮せず、コンテナの境界で強制的に改行します。
QURL や超長単語がコンテナからあふれる場合は？
Aword-wrap: break-word（つまり overflow-wrap: break-word）を使います。ブラウザは単語境界での改行を優先し、単一の超長単語が収まらない場合のみ単語内で改行するため、URL やメール、ハッシュ文字列などの処理に適しています。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
