◀ 23.

HTML <wbr> 要素の使い方と <code>word-break</code> / &shy; との違い

▶
編集
この記事の要点
  • は「ここで改行してもよい」という改行可能位置のヒントを示す 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 でほぼ代替可能。意図的に位置を指定したいときだけ を使うのが推奨。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-11 04:04:52 guest 205

人気ページ

最近更新/作成されたページ