wbrタグ -単語の途中で改行を許可する位置を指定する｜HTML辞典

<wbr>タグとは？

<wbr> タグは、単語の途中で改行を許可する位置（ワードブレークポイント）を指定するためのタグです。
このタグを使用すると、画面幅が狭くなったときに、適切な位置で自動的に改行されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。

閉じタグの有無

<wbr> は 自己終了タグ のため、閉じタグ（</wbr>）は不要 です。

基本的な記述方法

<p>この単語はとても長いので、自動的に<wbr>適切な位置で改行されます。</p>

使用できる主な属性

<wbr> タグには特別な属性はありません。

CSSを使ったデザイン変更

<wbr> 自体にはスタイルを適用できませんが、word-break や hyphens などと組み合わせることで、より柔軟な改行設定が可能です。

p {
    word-break: break-word;
}

適切な使用例

✅ 長い URL などで適切な改行位置を指定

<p>このサイトの URL は https://www.example<wbr>.com/longpath/verylongfilename.html です。</p>

✅ 長い単語の途中で改行を許可する

<p>Supercalifragilisticexpialidocious<wbr>のような長い単語を適切に折り返す。</p>

✅ テキストが狭いスペースに収まるように調整

<p>この文章は狭いカラムに表示されるため<wbr>改行が必要かもしれません。</p>

適切でない使用例（誤った使い方）

❌ <wbr> を使用しなくても自然に改行される場合

<!-- NG: 自然に改行される単語に <wbr> を使用 -->
<p>これは<wbr>通常の文章です。</p>

✅ 正しい書き方（長い単語の途中に使用）

<p>Supercalifragilisticexpialidocious<wbr>は非常に長い単語です。</p>

<wbr>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<wbr>	任意の場所で改行を許可	画面幅が狭いときに自動改行	URL、長い単語、コードの改行
<br>	強制的に改行	どんな環境でも改行される	文章の途中で明示的な改行
<hr>	区切り線を表示	視覚的な分割に使用	コンテンツの区切り

使用上の注意点

✅ <wbr> は通常の改行（<br>）とは異なる

• <br> は常に改行されるが、<wbr> は必要な場合のみ改行される。

✅ CSS と組み合わせると効果的

• word-break: break-word; などと組み合わせると、より柔軟に改行が制御できる。

関連タグ

• <br> – 強制的に改行
• <span> – インラインのテキスト装飾
• <p> – 段落を作成

まとめ

<wbr> タグは、HTML文書内で 適切な位置で改行を許可するためのタグ です。
URL や長い単語の途中での自動改行を可能にし、レスポンシブデザインにも有効です。