<wbr>改行可能箇所を示す

<wbr>タグは、改行可能な箇所(改行しても良い位置)をブラウザに対して示すために使用します。

日本語の場合は、表示可能な領域の幅に合わせてどの位置でも折り返し(改行)されますが、英語などの場合は半角スペースが入っている場所に合わせて改行が行われます。

このようなアルファベットが連続する場合など、通常は改行されないような範囲のテキストにおいて、コンテンツを適宣改行したい時にwbr要素を使用する事で、改行しても良い位置を指定する事ができます。

なおwbr要素の内容は前後のテキストの一部と見なされないため、単語の途中で改行してしまうと、その前後のテキストがそれぞれ別の言葉として捉えられてしまう場合があります。

HTML5での変更点

wbr要素は、もともとnobr要素と共にNetscape Navigatorが独自に拡張した要素でしたが、HTML5では仕様草案に取り入れられています。

またwbr要素の使い方としては、ハイフネーションと同じようなものになります。

ハイフネーションとは、英語文書などで長い単語がある場合に、その単語の途中で改行しても意味が通じるような場所で改行し、つながりのある単語という事を示すハイフンを挿入するという記述方法のことです。 これは英語文書では、単語の途中での改行が認められていないため行われる記述方法となります。

ですが、日本語の場合はどこで改行しても問題がなく、このような考え方はありません。 そのためwbr要素を使う事はほとんどないでしょう。

書式

  • <wbr 属性="値"> ……… 改行可能な位置を表す

使用した時の例

<p>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>
Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long<wbr>Long</p>

<!-- wbr無しの場合 -->
<p>LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong</p>

ブラウザ上の表示例

LongLongLongLongLongLongLongLongLongLongLong LongLongLongLongLongLongLongLongLong

LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong

対応ブラウザなどのデータ

形式 <wbr> カテゴリ フローコンテンツ, フレージングコンテンツ
親要素 フレージングコンテンツが期待される場所 子要素 なし
開始タグ 必須 終了タグ なし
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Google Chrome14~ , Firefox7~ , Safari5.1~