HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<wbr>
Word Break Opportunity (単語分断機会) 要素。テキストがオーバーフローした際に、改行しても良い場所を示します。
info
概要
<wbr> 要素は、**ブラウザがテキストを改行できる場所**を示しますが、実際に改行が必要になるまで改行は実行されません。日本語のテキストには通常不要ですが、長い英単語、URL、ハイフンでつなげられた単語などが、コンテナの幅を超えてはみ出すのを防ぐのに役立ちます。
play_circle
デモ (静的表示)
HTML (Source)
<!-- プレビューではみ出しを防ぐため、<div>で幅を制限しています -->
<div style="width: 150px; border: 1px solid #ccc; padding: 5px;">
This-is-a-very-long-word-without-spaces-that-will-cause-overflow
</div>
<br><br>
<div style="width: 150px; border: 1px solid #ccc; padding: 5px;">
This-is-a-very-long-word<wbr>-with-word-break<wbr>-opportunities-that-will-fit
</div>
Preview (Result)
This-is-a-very-long-word-with-word-break-opportunities-that-will-fit
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| なし | <wbr> 要素は、固有の属性を持ちません。グローバル属性のみ使用可能です。 |
code
実用例
1. 長いURLの適切な改行指定
<p>
<a href="https://example.com/some/very/long/path/to/a/resource/that/might/not/fit/on/small/screens">
https://example.com/some/very/long<wbr>/path/to/a/resource<wbr>/that/might/not/fit/on/small/screens
</a>
</p>
2. 非常に長い英単語の改行候補
<p style="width: 100px;">
antidisestablishmentarianism<wbr>antidisestablishmentarianism
</p>
3. ハイフン以外の場所での改行
<!-- 連続した数字の途中で改行を許可 -->
<span>9999<wbr>0000</span>
lightbulb
知っておくべき重要事項
border_style
CSSによる改行制御との違い
CSSの
CSSの
word-break: break-all; や overflow-wrap: break-word; は、単語の途中で強制的に改行を入れます。一方、<wbr> は、改行を**推奨する場所**を示すもので、よりセマンティックで、読みやすさを維持した改行が可能です。
accessibility_new
セマンティクスと構造
<wbr> は、表示上の問題を解決するための要素であり、テキストのコンテンツや意味には影響を与えません。スクリーンリーダーは通常、この要素を無視して、単一の連続した単語として読み上げます。