May 19th,2015
＃
要素について
| カテゴリー | フロー・コンテンツ、フレージング・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
| タグの省略 | 終了タグはありません |
“wbr”要素は改行可能な箇所を指定する要素です。
通常であれば改行が禁止されている箇所に“wbr”要素を配置するとその箇所で改行する機会を与えることができます。必ずその箇所で改行される“br”要素とは異なり、十分な表示領域があって改行が不要な場合や他に改行できる場所がある場合には改行されません。
連続したアルファベットや数字は既定では要素からあふれる場合でも折り返さないため、要素の外へはみ出してしまいますが、“wbr”要素によって折り返しても良い箇所を示しておくとその可能性を減らすことができます。
サンプルコード
<p style=" width: 50%; border: 3px rgb(27,19,14) solid;">
a<wbr>very<wbr>very<wbr>long<wbr>and<wbr>continuous<wbr>text<wbr>that<wbr>is<wbr>very<wbr>long
</p>
a
改行可能な箇所を指定していない場合は通常英単語などは単語の途中での改行が禁止されているので表示領域からはみ出します。
<p style=" width: 50%; border: 3px rgb(27,19,14) solid;">
averyverylongandcontinuoustextthatisverylong
</p>
averyverylongandcontinuoustextthatisverylong
＃
＃
仕様書
“wbr”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
定義されている仕様書
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| <wbr> |   |
  |
|
|
|
DOMインターフェース
“wbr”要素は“HTMLElement”インターフェイスを使用します。
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
wbr {
display-outside: break-opportunity;
white-space: normal;
}
