wbrを使った改行制御のテクニック

Webサイトでの改行位置は思う様に制御できない

Web制作の現場で、「意図しない改行」や、「うまく改行してくれない」といった事に悩まされる事が多々あります。
画面の幅によって、横方向に表示できる文字量が変わるので、確認する画面によって改行位置も変化するので、CSSを使って<br>タグの付け外しなどで実現しようとすると、なかなか大変です。
そんな時に助けてくれるのが<wbr>タグです。

wbrタグとは？何のためのタグ？

<wbr>タグは「ここで改行してもよい」という位置をブラウザに伝えるための空要素です。
ブラウザが<wbr>タグを参考にして、必要になったところの<wbr>タグで改行を行います。

<br>タグのように、改行を強制するのではなく、改行を許可するHTMLタグです。
この、改行の許可をするというのがポイントで、画面が狭いときなど、必要な時だけ改行して折り返してくれるので、意図しない位置で改行される事を、ある程度防止する事ができます。
改行位置を調整する事で、読みやすさを保つことができます。

<wbr>タグを有効にするには

<wbr>タグを有効にするために、親要素に次のスタイルを指定します。
word-break: keep-all;
overflow-wrap: anywhere;

keep-allは、読点や句点、かぎ括弧などの一部の文字を除いて、折り返しを禁止します。
改行を制御するのに折り返しを禁止するには理由があります。
<wbr>タグを有効にするには、折り返しを無効にしておく必要があるからです。

折り返しを禁止したので、URLなどの長い英単語での折り返しを補助するために、overflow-wrap: anywhere;も併せて記述して対策します。
overflow-wrap: anywhere;は、テキストが枠から溢れそうなときに、出来るだけ単語を分割しないように改行してくれます。

<wbr>タグの対応ブラウザについて

Chrome、Firefox、Safari、Edgeなどの主要なモダンブラウザでは、全て対応しています。
必要な箇所に積極的に利用していきたいですね。

親要素がflexボックスの際はご用心

何かと便利なのですが、親要素にdisplay:flex;が設定されている場合、一部のブラウザで<wbr>タグの前後がブロックとなり、配置されてしまうので、意図したとおりの配置にならない場合があります。
例えば

とすると、Firefoxでは以下のように出力されます。（2025年6月23日時点）


文字の入力のみの場合は、flexを利用する機会は少ないですが、前後にアイコンを設置する時など、他のレイアウトとの兼ね合いでflexを利用するケースはよくあると思います。
その場合は、<wbr>タグの親要素にflexを設定しないように、次のようにして、回避するようにしましょう。
アイコンなどの装飾は、div要素の子要素に設定してあげればOKですね。
そもそもflexを使わず、positionでやってみるのもいいかもしれません。

設置しすぎるとメンテナンス性に悪影響

改行が必要になった時に、その位置で改行してくれるので、例えば改行させたくない単語を区切って、並べる事もできます。
でもそれには、<wbr>タグを沢山設置する必要があります。

<wbr>タグが沢山設置されていると、入力されている文字を入れ替えた際に、再度<wbr>タグを設置しなおして調整する必要がでてくるので、メンテナンス性が高いとはいえません。
もちろん必要な箇所に設置すべきですが、設置しすぎると逆に困る場面も出てくるかもしれません。

ユーザー体験の質を向上させよう

Webサイトは、見た目の整え方が、ユーザー体験の質に直結します。
<wbr>タグは地味ですが、文字の改行位置をある程度整え、読みやすい文章を構成する為にとても役立ちます。

おかしな位置で改行されていると、読みにくくなったり、間違えて読み取ってしまう事もあります。
地味な作業ですが、<wbr>タグを使ってWebサイトの表示を整え、ユーザー体験の質を向上させましょう。