【HTML Living Standard】wbr要素の使い方
wbr要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
wbrオブジェクトは、Webページ上で非常に長い文字列（例えば長いURLやファイルパス、合成語など）が表示される際に、ブラウザが任意で改行しても良い位置を示すためのオブジェクトです。HTMLの仕様において、この要素は「Word Break Opportunity（単語区切りの機会）」を提供し、ユーザーエージェント（ブラウザ）に対して、この位置で行を折り返すことが可能であることを伝えます。
通常、ブラウザは単語の途中やハイフンがない箇所で自動的に改行を行いません。そのため、もし非常に長い単語やURLがページの幅を超える場合、レイアウトが崩れたり、内容が画面からはみ出して表示されたりする可能性があります。wbr要素は、このような状況を避けるために利用されます。
例えば、http://example.com/very/long/path/to/resource.html のような長いURLの途中に<wbr>を挿入することで、ブラウザは必要に応じてその位置で改行し、URL全体が適切に表示領域内に収まるよう調整します。この要素自体は視覚的に何も表示せず、追加のスペースや記号を生成することもありません。ただ単にブラウザが行の折り返しを検討できる候補地を提供するだけです。
レスポンシブデザインのWebサイトや、画面幅が限られるモバイルデバイスでコンテンツを表示する際に、テキストの可読性とデザインの一貫性を保つ上で、wbr要素は非常に有効な手段となります。適切に利用することで、ユーザー体験の向上に貢献します。
構文(syntax)
1<span>Thisisalongwordthatmayneedtobreak<wbr>insomecontexts.</span>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません