この記事の要点

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

wbr 要素とは

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

<!-- 長い URL を折り返したい -->
<p>
  https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource?<wbr>id=12345&<wbr>token=abc
</p>

<!-- 長いコマンドを折り返したい -->
<code>
  npm install --save-dev<wbr> eslint-plugin-react<wbr>-hooks
</code>

<!-- 日本語の長い文字列 -->
<p>
  非常に<wbr>長い<wbr>カタカナ語<wbr>でも<wbr>適切な位置で<wbr>改行できる
</p>

なぜ wbr が必要なのか

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

<!-- ❌ コンテナをはみ出す -->
<div style="width:200px; border:1px solid #ccc">
  https://example.com/very/long/path/to/resource
</div>

<!-- ✅ wbr で適切な位置で折返し -->
<div style="width:200px; border:1px solid #ccc">
  https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource
</div>

CSS の代替案との比較

方法	動作	用途
<wbr>	指定位置のみ折返し可	URL / 特定箇所だけ意図的に折返したい
word-break: break-all	どこでも改行（強制）	長い英単語・URL を強制折返し
overflow-wrap: break-word	はみ出すときだけ単語途中で改行	レイアウト崩れ防止
overflow-wrap: anywhere	任意位置で改行可（min-content 計算に影響）	モダン推奨
&shy; (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 とは目的が異なります:

<!-- 英語の長い単語: ハイフン付きで折返したい -->
<p>super­cali­fragi­listic­expi­ali­docious</p>
<!--
  改行が起きないとき: supercalifragilisticexpialidocious
  改行が起きるとき  : supercalifragilistic-
                     expialidocious
-->

<!-- URL: ハイフンを足したくない -->
<p>https://example.com/<wbr>path/<wbr>to/<wbr>resource</p>
<!-- ハイフンを足さずに折返したいので wbr を使う -->

使い所と使わない所

使うべきケース

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

避けるべきケース

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

JavaScript で動的に wbr を挿入

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

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

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

IE / 古ブラウザ対応

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

<!-- IE 6 等の超古ブラウザ用フォールバック -->
<style>
  wbr:after { content: "\\200B"; }  /* ゼロ幅スペース */
</style>

<!-- または直接 ゼロ幅スペース (U+200B) を埋め込む -->
<p>https://example.com/​path​to​resource</p>

Markdown / CMS での扱い

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

SEO とアクセシビリティ

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

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

<a href="https://example.com/very/long/path/to/resource">
  https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource
</a>
<!-- href 属性は wbr 無しの正規 URL -->
<!-- 表示テキストだけ折返し可 -->

FAQ

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

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

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