このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

wbr”要素:改行可能な箇所を指定HTML5で追加

記事May 19th,2015
July 7th,2020
改行可能な箇所を指定する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

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>

averyverylongandcontinuoustextthatisverylong

改行可能な箇所を指定していない場合は通常英単語などは単語の途中での改行が禁止されているので表示領域からはみ出します。

<p style=" width: 50%; border: 3px rgb(27,19,14) solid;">
averyverylongandcontinuoustextthatisverylong
</p>

averyverylongandcontinuoustextthatisverylong

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

仕様書

wbr”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<wbr>
定義なし

定義あり

定義あり

定義あり

定義あり
DOMインターフェース

wbr”要素は“HTMLElement”インターフェイスを使用します。

UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

wbr {
display-outside: break-opportunity;
white-space: normal;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク