<wbr>: 改行可能要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

試してみましょう

<div>  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p></div>

#example-paragraphs {  background-color: white;  overflow: hidden;  resize: horizontal;  width: 9rem;  border: 2px dashed #999;}

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

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

例

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

html

<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>

結果

技術的概要

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