HTML Living Standard/wbr

wbr 要素

概要

<wbr> 要素は、テキスト内で適切な箇所に改行を挿入できるポイントを示します。この要素はコンテンツを含まない 空要素 であり、視覚的には何も表示されませんが、ブラウザがテキストの折り返しを行う際に利用されます。

カテゴリ

フローコンテンツ (Flow content)
フレージングコンテンツ (Phrasing content)

使用できる文脈

フレージングコンテンツが期待される場所。

コンテンツモデル

なし (空要素)

タグ省略のルール

どちらのタグも省略できません。

使用できる属性

グローバル属性

アクセシビリティ上の注意

著者向けの注意: 必要な場合にのみ使用してください。過度に使用すると、テキストの流れが不自然になる可能性があります。
実装者向けの注意: 多言語や双方向テキスト (LTR/RTL) における改行動作を正しくサポートしてください。

DOM インターフェース

この要素は、HTMLElement インターフェースを使用します。

使用例

長いテキストの可読性向上

以下の例では、長いテキストが改行可能なポイントで折り返されるようにしています。

<p>
  So then she pointed at the tiger and screamed
  "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!
</p>

長いURLの折り返し

長いURLがページデザインを崩すのを防ぐために使用します。

<p>
  Visit our documentation at 
  <a href="https://www.example.com/super<wbr>long<wbr>url<wbr>to<wbr>break">
    https://www.example.com/superlongurltobreak
  </a>.
</p>

注意点

<wbr> 要素は、あくまで オプションの改行ポイント を提供するものであり、強制的に改行を挿入するものではありません。
コンテンツ内にテキストを含むことはできません。以下のような利用は不適切です：

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong"; // 無効な利用例
document.body.appendChild(wbr);

双方向テキストのレンダリング

<wbr> 要素は、双方向テキスト (LTRとRTL) のアルゴリズムにおいて特定のレンダリング要件を持ちます。これにより、複数言語が混在するテキストでも正しいテキストフローが確保されます。