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

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

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

要素について

カテゴリー フロー・コンテンツフレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容
タグの省略 終了タグはありません

wbr”要素は改行可能な個所を指定する要素です。英単語などの本来単語の途中で改行されないテキストに改行の機会を与えます。

必ずその箇所で改行されるbr”要素とは異なり、十分な表示領域がある場合など改行する必要がない場合は改行されません。

スタイルシートのword-break”プロパティoverflow-wrap”プロパティが適用されている場合は違う箇所で改行される場合があります。

サンプルコード

<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>
定義なし

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク