<wbr> nobr内での改行位置の指定

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 なし
対応ブラウザ caniuseで確認

<wbr>タグの説明

<wbr>は、文章の中でブラウザが任意で改行してよい位置を指定します。要素の幅が足りている場合は改行されません。

通常、文章の折返しが必要になった場合に、ブラウザは直近の位置で改行を行います。しかし、長い単語やひとつながりのフレーズが意図しない箇所で改行されてしまうと、意味が損なわれる可能性があります。このタグは、それを避けて改行する位置を提案するために使います。

<wbr>タグの特徴

  • レイアウトの初期値はインライン要素です。文章の改行に影響を与えるかどうかは、要素の幅とコンテンツの内容によります。
  • 視覚的な効果は与えられません。改行する位置を暗黙的に提案するだけです。
  • この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。

<wbr>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<wbr>の使い方とサンプル

<wbr>を設置しておくと、要素の幅が足りなかった場合に、内容を改行する位置を調整できます。

HTML
<p style="width:240px; background:#ccc;">
HyperTextMarkupLanguage.HyperTextMarkupLanguage.HyperTextMarkupLanguage.
</p>

<p style="width:240px; background:#ccc;">
HyperTextMarkupLanguage.<wbr>HyperTextMarkupLanguage.<wbr>HyperTextMarkupLanguage.
</p>

<p style="width:180px; background:#ccc;">
HyperText<wbr>Markup<wbr>Language.<wbr>HyperText<wbr>Markup<wbr>Language.<wbr>HyperText<wbr>Markup<wbr>Language.
</p>
表示確認

HyperTextMarkupLanguage.HyperTextMarkupLanguage.HyperTextMarkupLanguage.

HyperTextMarkupLanguage.HyperTextMarkupLanguage.HyperTextMarkupLanguage.

HyperTextMarkupLanguage.HyperTextMarkupLanguage.HyperTextMarkupLanguage.

<wbr>に関連するHTMLタグ

文字列の表現を指定する要素
<div> ブロックレベル要素としての範囲を指定
<span> インライン要素としての範囲を指定する
<br> 改行を行う
<wbr> 文章の中で改行可能位置を指定する
<b> 文字を太字にする
<mark> 文章の中で目立たせたい箇所をマーキングする
<pre> ソースを整形済みテキストとして表示する
<bdi> ページの書字方向とは別の書字方向を指定する
<bdo> 書字方向を指定する
<ruby> ルビを振る文字列の範囲を指定する
<rt> ルビの内容を指定する
<rp> ルビが非対応な環境で読みがなを囲う記号を指定する
<rtc> ルビテキストの集まりを指定する
<sub> 下付き文字として表示する
<sup> 上付き文字として表示する
<details> 折りたたみ可能なディスクロージャー・ウィジェットを設置する
<summary> 折りたたみ可能なディスクロージャー・ウィジェットの概要を設定する