index.md

title	slug	l10n
<wbr>: 改行可能要素	Web/HTML/Element/wbr	sourceCommit a16e757b697f08201d91de021d523333df6287fc

{{HTMLSidebar}}

<wbr> は HTML の要素で、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。

{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}

属性

この要素にはグローバル属性のみがあります。

メモ

UTF-8 エンコードを使用するページでは、 <wbr> 要素は U+200B ZERO-WIDTH SPACE コードポイントのように作用します。特に、この要素は Unicode bidi BN コードポイントのように作用するため、{{Glossary("bidi", "双方向性")}}には影響を与えません。 <div dir=rtl>123,<wbr>456</div> が 2 行に分かれないときは 456,123 ではなく 123,456 と表示されます。

同じ理由で、 <wbr> 要素は改行位置でハイフンを生成しません。行末にのみハイフンを表示させるには、代わりにソフトハイフンの文字エンティティ (­) を使用してください。

例

The Yahoo Style Guide では、句読点などの区切り文字が行末に置かれることを避けるため URL を句読点の前で改行することを推奨しています。区切り文字が行末にあると、読者が URL の末尾を誤解する可能性があります。

<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

結果

{{EmbedLiveSample("Example")}}

技術的概要

コンテンツカテゴリー	フローコンテンツ, 記述コンテンツ
許可されている内容	なし
タグの省略	この要素は{{Glossary("void element", "空要素")}}です。開始タグは必須であり、終了タグを記述してはなりません。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	すべて
DOM インターフェイス	{{domxref("HTMLElement")}}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• {{cssxref("overflow-wrap")}}
• {{cssxref("word-break")}}
• {{cssxref("hyphens")}}
• {{HTMLElement("br")}} 要素