HTML5 で導入
概要
Word Break Opportunity (<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> 要素は改行位置でハイフンを生成しません。行末にのみハイフンを表示させるには、代わりにソフトハイフンの文字実体参照 (­) を使用してください。
この要素は Internet Explorer 5.5 で最初に実装され、HTML5 で公式に定義されました。
使用可能な場所
| 許可された内容 | なし |
| タグの省略 | この要素は空要素です。開始タグは必須であり、終了タグを記述してはならない。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素 |
| 標準文書 | HTML 5, section 4.6.24 |
属性
この要素はグローバル属性以外の属性を持ちません。
DOM インターフェイス
この要素は HTMLElement インターフェイスを提供します。
例
The Yahoo Style Guide では、句読点 【訳注: URL ではスラッシュも含む】 が行末に置かれることを避けるため 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>
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | Unknown (3.0) | 5.5 | 11.7 | 4.0 |
| 機能 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.5 | 10.0 (10.0) | ?? | 未サポート | 未サポート |