<wbr> | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`<wbr>`	1	12	1	4	18	3.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

HTML

<p>https://example.com/<wbr>very/<wbr>long/<wbr>path/<wbr>to/<wbr>resource</p>
<p>Supercalifragilistic<wbr>expialidocious</p>

wbr 要素で長い URL や単語の適切な改行位置を提案。

ファイルパスやディレクトリ構造に wbr を挿入。

wbr, word-break, overflow-wrap の違いを比較。

<wbr> の活用

<wbr> は HTML の要素で、改行機会位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。