<wbr>: WBR 要素
最終更新：2026-10-13
<wbr>WBR 要素
任意の改行位置を表します。ブラウザーは必要な場合にのみここで改行し、強制改行や空白追加はしません。長い単語・URL・コードに適しています。
| カテゴリ | テキスト内容 |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
とても長い英単語<wbr>ここで改行可▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <wbr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： <br> と違い、wbr は行が長すぎるときにのみ改行を提案します。それ以外では改行しません。
❓ よくある質問
Qwbr は何に使うものですか？
A
<wbr>（word break opportunity）は「ここで折り返してもよい」ことを示します。長い URL・長い英単語・長いコードの識別子に入れておくと、ブラウザは空きが足りないときだけそこで折り返し、空きがあれば1行のままです。それ自体は一切の可視文字を生みません。Qwbr と CSS の word-break の違いは何ですか？
A
<wbr> は内容の中の「折れる場所」をピンポイントで制御します。CSS の word-break/overflow-wrap は全体ルール（anywhere ならどこでも折れる）です。単独の長い文字列なら wbr の方が精確、段落全体のあふれ防止なら CSS の方が手軽です。Qwbr とソフトハイフン（soft hyphen）の違いは何ですか？
A
­ は折り返したときにハイフンを表示しますが、<wbr> は何も表示せずに折れます。URL やコードの識別子など、ハイフンを付けてはいけない内容には wbr を、自然言語の単語の折り返しには shy を使います。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
