<wbr> - 単語の区切り

• トップ
• HTMLリファレンス
• <wbr>

• 概要
• 説明
• 属性
• 使用例
  • 長い英単語を改行する
  • パス名やURLを改行する
  • ソフトハイフンによる改行制御
• 関連項目
• リンク

概要

形式

<wbr>

サポート

https://caniuse.com/wbr-element

カテゴリ

フローコンテンツ

フレージングコンテンツ

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

無し(Empty)

タグの省略

開始タグ:必須 / 終了タグ:無し

属性

グローバル属性

説明

wbr は Word BReak の略です。行の中で「改行してもよい箇所」を示します。

wbr は最初 Netscape Navigator でサポートされました。<nobr> とあわせて使用され、<nobr> によって改行が禁止されたテキストでも <wbr> が挿入された箇所だけは改行が許可されます。

wbr はその後、IE など他のブラウザに採用されました。HTML4.01 には採用されませんでしたが、HTML5 や HTML Living Standard でサポートされました。ただし、<nobr> は採用されていません。

改行制御に関わるスタイルシートには white-space、line-break、word-break などがあります。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

長い英単語を改行する

下記の様に長い英単語を適度に改行する場合に用います。

塵肺症のことを英語で、
Pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coni<wbr>osis
といいます。

横幅の狭いブラウザでは、下記の例の様に表示されます。

塵肺症のことを英語で、Pneumonoultramicroscopicsilico
volcanoconiosis といいます。

パス名やURLを改行する

例えば、パス名やURLの途中で改行されないことにより、文章の右側に空白が空いてしまう場合、

HTML5に関する概要は
http://ja.wikipedia.org/wiki/HTML5 を参照して
ください。

wiki の前に <wbr> を挿入することで、下記の様に表示することが可能となります。

HTML5に関する概要は http://ja.wikipedia.org/
wiki/HTML5 を参照してください。

ソフトハイフンによる改行制御

<wbr> と似たものにソフトハイフンという特殊文字があります。ソフトハイフンを挿入した箇所では長い単語の途中であっても改行が許され、改行された場合はハイフン(またはハイフンに似た記号)が表示されます。ソフトハイフンは、Unicode では U+00AD、HTML4.01 では、文字参照の &shy; や &#173; に割り当てられています。HTML5 には &shy; や &#173; の記載はありませんが、Unicode(U+00AD)は使用可能です。

塵肺症のことを英語で、
Pneumono­ultra­micro­scopic­silico­volcano­coni­osis
といいます。

ソフトハイフンをサポートするブラウザでは、例えば次のように表示されます。

塵肺症のことを英語で、Pneumonoultramicroscopicsilico-
volcanoconiosis といいます。

関連項目

• <nobr>
• <br>

リンク

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/wbr
• https://caniuse.com/wbr-element

---