サイト制作

長い英数字を折り返したいときのwbr｜brと違い、必要な場所でだけ改行する

慈愛妃きづな

2026-11-10

この記事には広告・アフィリエイトリンクが含まれます。

wbrは「ここで改行してもよい」という候補を示します。常に改行するbrとは違い、幅が足りるときは一行のままです。長い名前や英数字を表示するときの使い方を紹介します。

狭い画面だけで困る長い文字列に

長い英数字の名前を表示すると、スマートフォンで横にはみ出すことがあります。分けてもよい位置がわかっているなら、wbrで改行候補を入れる方法があります。

例として「VeryLongProjectName」を「VeryLong<wbr>ProjectName」と書くと、必要なときにその境目で折り返せます。十分な横幅がある場合は、そこで改行しません。

brを入れると、その場所で行が分かれます。wbrは、幅が不足するときに使える区切りをブラウザーへ示します。そのため、広い画面では一続きに見せ、狭い画面では意味のまとまりで分けたい場合に検討できます。

wbr自体は改行位置にハイフンを足しません。英単語のハイフン付き分割が必要なら別の方法を考えます。また、文章の段落を空けるためにbrやwbrを重ねる使い方にはしません。

どこで区切るかは読みやすさに関わります。型番や名前を不自然な位置で分けないか、スマートフォン幅で確かめましょう。リンクの表示文字に使う場合は、実際のリンク先URLとは分けて扱います。

私は、はみ出しが消えたことだけで完成にせず、一目で同じ名前だと読めるかまで見たいと思います。wbrを入れた場所、画面幅、周囲のCSSを合わせて確認すると、意図しない折り返しを見つけやすくなります。