HyperText Markup Language wbr element.
wbr要素は、テキスト内でブラウザが任意で改行しても良い位置を示しますが、この改行規則は必要のない場合は改行を行いません。
wbr要素の内容は、その前後のテキストの一部とは見なされません。例えば、「アグリゲイティバクター・アクチノミセテムコミタンス」という言葉が長いからといって、 「アグリゲイティバクター・<wbr>アクチノミセテムコミタンス」のように指定してしまうと、 改行の前後がそれぞれ別の言葉として解釈されてしまうかもしれません。
wbr要素は、もともとは Netscape Navigator独自の要素で、 HTML4.01の仕様には取り入れられていませんが、すでに一部のブラウザでサポートされています。HTML5では、標準仕様として採用される予定です。
この要素にはグローバル属性のみがあります。
wbr要素なしの場合
<p>SheSellsSeaShellsByTheSeashore.TheShellsSheSellsAreSurelySeashells.SoIfSheSellsShellsOnTheSeashore,I'mSureSheSellsSeashoreShells.</p>
wbr要素ありの場合
<p>She<wbr>Sells<wbr>Sea<wbr>Shells<wbr>By<wbr>The<wbr>Seashore.<wbr>The<wbr>Shells<wbr>She<wbr>Sells<wbr>Are<wbr>Surely<wbr>Seashells.<wbr>So<wbr>If<wbr>She<wbr>Sells<wbr>Shells<wbr>On<wbr>The<wbr>Seashore,<wbr>I'm<wbr>Sure<wbr>She<wbr>Sells<wbr>Seashore<wbr>Shells.</p>
ちなみに意味は…
「 彼女は海岸の近くで海の貝殻を売っている。彼女が売っている貝殻はきっと海の貝殻だ。もし彼女が海岸で貝殻を売っているなら、彼女は海岸の貝殻を売っているに違いない。」
となります。
wbr要素なしの場合
SheSellsSeaShellsByTheSeashore.TheShellsSheSellsAreSurelySeashells.SoIfSheSellsShellsOnTheSeashore,I'mSureSheSellsSeashoreShells.
wbr要素ありの場合
She
wbr要素なしの場合は、ウィンドウ幅を超えていますので、横スクロールして表示する必要があります。
wbr要素ありの場合は、適切な位置、ウィンドウ幅内に表示されるように、ウィンドウの右端で改行されていることがわかります。
また、このサンプルを使って、ウィンドウ幅を変えて表示してみると改行位置が変わっていることが確認できます。また、必要のない改行についても 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>
http://this
UTF-8 エンコードを使用するページでは、wbr要素は U+200B ZERO-WIDTH SPACE コードポイントのように作用します。特に、この要素は Unicode bidi BN コードポイントのように作用するため、双方向性には影響を与えません。<div dir=rtl>123,<wbr>456</div> が 2 行に分かれないときは 456,123 ではなく 123,456 と表示されます。
同じ理由で、wbr要素は改行位置でハイフンを生成しません。行末にのみハイフンを表示させるには、代わりにソフトハイフンの文字実体参照 (­) を使用してください。
wbr要素の代わりに ­ を使用した場合
SheSellsSeaShellsByTheSeashore.
wbr要素の代わりに ­ を使用した場合
<p>She­Sells­Sea­Shells­By­The­Seashore.<wbr>The­Shells­She­Sells­Are­Surely­Seashells.<wbr>So­If­She­Sells­Shells­On­The­Seashore,<wbr>I'm­Sure­She­Sells­Seashore­Shells.</p>
赤丸で示したように、画面右端で改行される場所にだけ「-」が表示されています。
wbr要素の代わりに、すべてを ­ に入れ替えて表示してしまうと、「.」や「,」の後ろにも「-」が表示されてしまいますので、こういった場所には wbr要素のほうが適切なようです。
wbr要素と ­ の使い分け
<p>She­Sells­Sea­Shells­By­The­Seashore.<wbr>The­Shells­She­Sells­Are­Surely­Seashells.<wbr>So­If­She­Sells­Shells­On­The­Seashore,<wbr>I'm­Sure­She­Sells­Seashore­Shells.</p>
この要素は Internet Explorer 5.5で最初に実装され、 HTML5で公式に定義されました。