<wbr>: 改行可能要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

属性

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

メモ

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

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

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

仕様書

Specification
HTML
# the-wbr-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
wbr

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報