過去バージョン

この記事の要点

は「ここで改行してもよい」という改行可能位置のヒントを示す HTML 要素 長い URL / コード / 単語の折返し制御に有効。デフォルトでは改行しない、必要時のみ改行 CSS の代替: word-break: break-all / overflow-wrap: break-word / overflow-wrap: anywhere ­（ソフトハイフン）は改行時にハイフン表示する欧米語向け。 はハイフン無しで日本語・URL 向け 空要素なので終了タグ無し。HTML5 で標準化、IE7+ で対応

wbr 要素とは

Word Break Opportunity の略。「この位置で改行してもよい」というヒントをブラウザに与える HTML5 の空要素です。デフォルトでは改行しないが、表示幅が狭く折返しが必要なときだけ、この位置で改行されます。

  https://example.com/very/long/path/to/resource?id=12345&token=abc




  npm install --save-dev eslint-plugin-react-hooks




  非常に長いカタカナ語でも適切な位置で改行できる

なぜ wbr が必要なのか

通常、ブラウザはスペースやハイフンの位置で改行します。URL のように区切り文字が無い長い文字列は、コンテナをはみ出して横スクロールを発生させます。

  https://example.com/very/long/path/to/resource




  https://example.com/very/long/path/to/resource

CSS の代替案との比較

方法	動作	用途
	指定位置のみ折返し可	URL / 特定箇所だけ意図的に折返したい
word-break: break-all	どこでも改行（強制）	長い英単語・URL を強制折返し
overflow-wrap: break-word	はみ出すときだけ単語途中で改行	レイアウト崩れ防止
overflow-wrap: anywhere	任意位置で改行可（min-content 計算に影響）	モダン推奨
­ (U+00AD)	改行時にハイフン表示	英独語の長い単語
hyphens: auto	言語辞書ベースで自動ハイフネーション	英語コンテンツ

CSS で同じ効果

/* 推奨: モダンブラウザでの折返し制御 */
.url-text {
    overflow-wrap: anywhere;   /* または break-word */
    word-break: normal;        /* 不要な強制改行をしない */
}

/* CJK と URL の両対応 */
.long-text {
    word-break: break-all;     /* 日本語の途中改行は問題ない */
    overflow-wrap: break-word; /* URL 等もこれで吸収 */
}

/* 英語のハイフネーション */
.english-text {
    hyphens: auto;
    -webkit-hyphens: auto;
}

­ ソフトハイフンとの違い

HTML エンティティ ­（U+00AD SOFT HYPHEN）は、改行時にハイフン記号を表示する不可視文字です。欧米語のハイフネーション向けで、wbr とは目的が異なります:

super­cali­fragi­listic­expi­ali­docious



https://example.com/path/to/resource

使い所と使わない所

使うべきケース

• 長い URLを本文中に表示するとき
• コード例（コマンド・ファイルパス）を折返したいとき
• 非常に長い固有名詞 / 商品コード
• メールアドレス（ を @ や . 前に）

避けるべきケース

• 通常の文章（CJK は自然と改行できるので不要）
• code / pre の中（white-space: pre と相性悪い）
• CSS で overflow-wrap を使えば済むケース

JavaScript で動的に wbr を挿入

// 長い URL に wbr を自動挿入
function wbrify(url) {
  return url.replace(/([/?&=])/g, '$1');
}

document.querySelectorAll('.url').forEach(el => {
  el.innerHTML = wbrify(el.textContent);
});

// 例: https://example.com/path?id=123
// →   https://example.com/path?id=123

IE / 古ブラウザ対応

HTML5 標準化以前、IE は独自実装で を解釈していました。現在は IE7+ / すべてのモダンブラウザで対応:

https://example.com/​path​to​resource

Markdown / CMS での扱い

Markdown は をそのまま通します。WordPress 等の CMS でも HTML タグとして許可されています。フィルター系プラグインで除去されないように注意。

SEO とアクセシビリティ

• SEO: 検索エンジンは を無視するので、URL の分割としては評価されない（OK）
• コピペ: ブラウザ・OS によって の位置にゼロ幅スペースが入り、コピペした URL が機能しない場合がある
• スクリーンリーダー: 通常は読み上げない

コピペ問題を避けるには、表示用テキストとリンク先 URL を分けるのが定番:

  https://example.com/very/long/path/to/resource

FAQ

Q: と
の違い？
A:
は必ず改行、 は必要なときだけ改行。空き幅があれば は何もしません。

Q: 終了タグは必要？
A: 空要素なので不要。XHTML 互換にしたいなら も可。

Q: CSS だけで済ませたい
A: overflow-wrap: anywhere + word-break: break-word でほぼ代替可能。意図的に位置を指定したいときだけ を使うのが推奨。