HTML

The <wbr> element in HTML is a tag that specifies a potential break point within long words or URLs, allowing the browser to break the line only when necessary based on the screen width.

wbr 要素

<wbr>要素とは？

定義

• <wbr>要素は、**"Word Break Opportunity"（単語の切れ目の候補点）**を指定するための要素です。
• 通常、ブラウザは空白文字（スペースやタブなど）がある箇所で単語を自動的に改行できます。しかし、長い単語など空白が含まれていない連続した文字列の場合、ブラウザは自動では改行位置を作れず、文章が横スクロールになったり、レイアウトが崩れる可能性があります。
• そこで<wbr>を使用すると、特定の位置で改行してよいとブラウザに指示できるようになります。

特徴

• **空要素（void要素）**の一種です。自己終了タグとして書くこともできます。
  例：<wbr> または <wbr />
• 画面上で明示的に目に見える要素ではありません（余白や改行自体を無条件に挿入するわけではない）。
• ブラウザは必要に応じてその位置で改行できるように扱います。

<br>や他の改行要素との違い

<br>との比較

• **<br>**は、HTMLで「ここで必ず改行する」と指定する要素です。つまり、文章がまだ行に余裕があっても、その場所で強制的に改行されます。
• 一方、**<wbr>**は「改行候補」なので、行の幅が足りなくなった際にのみ改行が行われるという動的な振る舞いをします。行の余裕がある場合は改行しません。

<p>強制改行の例：長い単語<br>次の行に移りました</p>

<p>改行候補の例：長い単語の途中<wbr>次の行に移るかはブラウザ任せ</p>

• <br>は必ず改行
• <wbr>は、行が狭い状況なら改行し、十分に広ければ改行しない

他の要素やテクニックとの比較

<hr>

水平方向の区切り線を表す要素であり、単なる改行とは異なる意味を持ちます。

white-spaceプロパティ（CSS）

文字列を折り返す／折り返さないなどの挙動を管理しますが、<wbr>のように特定の位置だけ細かく指定するのとは用途が異なります。

具体的な使用例

長いURLの改行

<p>
	このURLは非常に長く、レイアウトを崩す可能性があります： 
	https://www.example.com/very_long_path_name_with_many_characters.html
</p>

上記のような非常に長いURLが1行に収まらず、ページの横スクロールを引き起こす場合があります。そこで<wbr>を使って、改行を許可したいポイントを挿入する方法が考えられます。

<p>
	このURLは非常に長く、レイアウトを崩す可能性があります：<br>
	https://www.example.com/very_<wbr>long_<wbr>path_<wbr>name_<wbr>with_<wbr>many_<wbr>characters.html
</p>

<wbr>を入れた箇所で必要に応じて改行できるので、端末の画面幅が狭い場合でも閲覧性を保ちやすくなります。

長い英単語やプログラミング上の識別子

<p>
	例えば「supercalifragilisticexpialidocious」という非常に長い単語がある場合、
	途中で<wbr>をいくつか入れるとスマホ画面などでも読みやすく表示できます。
</p>

<p>
	supercali<wbr>fragilistic<wbr>expiali<wbr>docious
</p>

このように長い英単語でレイアウトが崩れるのを防ぎます。

組み込みエラーメッセージへの対応

フォームの入力チェックのエラー文にどうしても長い文字列が含まれてしまう、など特定の文言を任意に折り返したい場合も有効です。

<wbr>の使用が効果的な場面

スマートフォンやタブレットなど、画面幅が狭いデバイスを想定している場合

レスポンシブデザインでは画面の幅に応じて折り返しが必要となるため、<wbr>で折り返しポイントを指定しておくとレイアウト崩れを防ぎやすい。

技術文書や仕様書などにおける長い英単語や変数名、関数名

コードサンプルや技術用語をそのまま表示したい場合に視認性を高めることができる。

記事や説明文中に長いURLをそのまま記載する必要がある場合

リンクテキストを短くする手段がない、または実際のURLをそのまま表示したい場合に便利。

ブラウザ対応状況

• **主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）**ではすべてサポートされています。
• 一部の古いブラウザではサポートが限定的だった可能性がありますが、HTML5が標準化されてからのバージョン（IE11以降など）では基本的に対応されています。

レガシーブラウザでの考慮

• もし非常に古いブラウザ向けの対応が必要な場合は、<wbr>だけに頼らずCSSのword-wrap: break-word;やoverflow-wrap: break-word;などのプロパティと組み合わせて使うことで、より堅牢なレイアウトを実現できます。

CSSとの連携方法

overflow-wrap（またはword-wrap）との併用

CSS側で要素の折り返し挙動を設定できるプロパティがあります。代表例として：

.long-text {
	overflow-wrap: break-word; /* または word-wrap: break-word; */
}

これにより、長い単語を強制的に折り返すことができますが、どの位置で折り返されるかはブラウザの自動判定に任されます。

<wbr>を併用することで、明示的に「ここなら折り返してよい」というポイントを指定可能になるため、見た目や読みやすさをコントロールしやすくなります。

hyphensプロパティとの違い

hyphensプロパティは単語のハイフネーション（ハイフンを入れて分割）を行うためのCSS機能です。

<wbr>はハイフンを挿入するわけではなく、単に改行の候補を示すだけなので用途や表記上の見栄えが異なります。

ゼロ幅スペース（​）との違い

ゼロ幅スペース（Zero Width Space, ZWS）

​（ゼロ幅スペース）は、ブラウザに「ここで改行してもよい」ことを示す「不可視の空白文字」です。

<wbr>は要素として同じような意味合いを持っていますが、HTMLコードの中でマークアップとして扱いやすいというメリットがあります。

文字参照を使って挿入する場合は、文字列中に埋め込む形になるため、視覚的に見づらくなる可能性があります。一方、<wbr>はタグとして明示されるため可読性が高くなる場合もあります。

使い分け

どちらでも機能的には似通った結果を得られるが、ソースコードの可読性やメンテナンスのしやすさを重視するなら<wbr>を使うことが多い。

「タグとして書きたくない」「タグを書けない環境（Markdownや特定のCMSなど）でうまく扱えない」場合はゼロ幅スペースの文字参照を使う、といった使い分けもあります。

アクセシビリティへの配慮

画面読み上げソフト（スクリーンリーダー）への影響

<wbr>は基本的にスクリーンリーダーには影響を与えません。多くのスクリーンリーダーは改行候補として解釈するだけで、余計な読み上げを挿入しません。

ただし、使用環境によっては改行タイミングが不自然に感じられる場合もあるため、文章の区切りや文脈が損なわれないようにする配慮が必要です。

適切な文書構造との両立

<wbr>を多用しすぎるとソースコードが煩雑になり、可読性やメンテナンス性が下がる可能性があります。

長い文字列を複数個所で切りたい場合は、やみくもに<wbr>を挟むのではなく、それが本当に必要な場面かどうかを検討するのが望ましいです。

まとめ

• <wbr>要素は、改行を強制せずに「ここで改行してもいい」というオプションをブラウザに与えるためのHTML要素です。
• ​（ゼロ幅スペース）でも同様の効果を得られますが、タグとして扱う<wbr>のほうが可読性が高い場合があります。
• <br>とは異なり、画面幅が十分な場合は改行されず、可変レイアウトやレスポンシブデザインとの相性が良いです。
• 中級者以上の方にはCSSのoverflow-wrapやhyphensとの組み合わせ、あるいはアクセシビリティやスクリーンリーダーでの挙動を考慮すると、より高度なテキスト表示制御が可能です。
• ただし、使いすぎるとソースコードが散らかりやすいので、必要最低限の箇所に絞って活用するのが望ましいです。

以上がHTMLの<wbr>要素に関する詳解です。長い単語やURL、識別子などを表示する際に、<wbr>は役立つツールになり得ます。適切に使いこなし、読みやすく美しいレイアウトを実現しましょう。