トップページ  > HTML Living Standard  > <wbr>

★HTML Living Standard リファレンス

<wbr> …… 改行箇所の候補を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<wbr>タグは、改行箇所の候補を表す際に使用します。

wbr要素で指定すれば、必ずそこで改行されるということではありません。 wbr要素で指定しておくと、表示幅の都合などで改行される場合の改行箇所の候補となります。

wbr要素の終了タグについて

HTMLの仕様では、wbr要素には終了タグ</wbr>はありません。

■使用例

以下のサンプルでは、叫んだ内容が1つの長い単語として書かれています。 この際、文字列内の個々の単語をwbr要素で区切っておくことで、単語の区切り箇所で折り返されて表示されます。 wbr要素で区切っていない下の行の表示と比較してください。

HTMLソース

<h5>wbr要素を使用した場合</h5>
<p>
彼女はトラを指さして叫んだ。
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me<wbr>there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!
(おまえに捕まるものか!)
</p>

<h5>wbr要素を使用しない場合</h5>
<p>
彼女はトラを指さして叫んだ。
"thereisnowayyouareevergoingtocatchmethereisnowayyouareevergoingtocatchme"!
(おまえに捕まるものか!)
</p>
↓↓↓

ブラウザ上の表示

wbr要素を使用した場合

彼女はトラを指さして叫んだ。 "thereisnowayyouareevergoingtocatchmethereisnowayyouareevergoingtocatchme"! (おまえに捕まるものか!)

wbr要素を使用しない場合

彼女はトラを指さして叫んだ。 "thereisnowayyouareevergoingtocatchmethereisnowayyouareevergoingtocatchme"! (おまえに捕まるものか!)

■関連項目

  • <br> …… 改行を表す
  • <wbr> …… 改行箇所の候補を表す
  • <hr> …… 段落レベルのテーマ区切りを表す
  • <div> …… 特別な意味を付加せず子要素をまとめる
  • <span> …… 特別な意味を付加せず範囲指定する
  • <p> …… 段落を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ