日本語の見出しは、画面幅が少し変わるだけで印象が変わります。「ホームページ」が「ホーム／ページ」のような感覚で切れたり、最後の1文字だけ次の行へ送られたりすると、内容は同じでも読みづらく見えます。
つい<br>を入れて整えたくなりますが、固定改行は別の画面幅で今度は不自然になりがちです。
CSSには、行の長さをそろえるtext-wrap: balanceや、日本語の文節を見て改行するword-break: auto-phraseがあります。万能な1行ではないので、「何を直したいか」で使い分けます。
直したいのは、行の長さか、言葉の切れ目か
最初に、気になっている崩れ方を分けてみます。
| 気になること | まず検討する方法 |
|---|---|
| 最後の行だけ極端に短い | text-wrap: balance |
| 文節や意味のまとまりの途中で切れる | word-break: auto-phrase |
| 特定の場所を改行候補にしたい | wbr |
| 短いコピーのまとまりを手で守りたい | spanとinline-block |
| 必ずその位置で改行する意味がある | br |
balanceは行の分量を、auto-phraseは言語に応じたフレーズの境界を扱います。<wbr>は改行してよい位置を追加するHTMLで、必ず改行する<br>とは役割が違います。
まず試しやすいのはtext-wrap: balance
2〜3行になる見出しで、1行目だけ長く、2行目が極端に短くなる場合はtext-wrap: balanceが使えます。
.page-title {
text-wrap: balance;
}balanceは、各行の長さがなるべくそろうように折り返し位置を調整します。見出し、キャプション、短い引用のような短文向けです。
ただし、日本語の単語や文節を理解して「ここでは切らない」と判断する機能ではありません。行のバランスが良くなっても、意味の区切りとして理想的とは限りません。
また、計算量を抑えるためブラウザ側に行数制限があります。balanceが適用されるのは、Chromiumなら6行以下、Firefoxなら10行以下のテキストブロックです。見出し用途なら通常は十分な範囲です。
日本語の文節を見て切るword-break: auto-phrase
「行の長さ」ではなく「日本語として自然なまとまり」を優先したいときに出てくるのがword-break: auto-phraseです。
<h1 lang="ja" class="page-title">
ウェブ制作をもっと分かりやすくする方法
</h1>.page-title {
word-break: auto-phrase;
}auto-phraseは、自然なフレーズ境界、つまり日本語の文節を解析して改行位置を改善します。Chrome 119以降で提供され、言語が日本語であることを示すlang="ja"が必要です。
ただし、2026年9月時点でも「主要ブラウザで広く使える」とは言えません。Chrome・Edgeでは使えますが、WebKitは2026年6月のSafari Technology Preview 246でpreviewとして有効化された段階で、安定版Safariでの正式提供は確認できませんでした。Firefoxについても、対応済みを示す公式情報は確認できていません。
そのため、効けば改行がよくなる追加機能として使い、効かなくても普通に読める状態を残します。
.page-title {
text-wrap: balance;
}
@supports (word-break: auto-phrase) {
.page-title {
word-break: auto-phrase;
}
}意図した位置へ寄せたいならwbrで候補を置く
ブラウザ任せではなく、「ここなら改行してよい」という候補をHTML側で指定したいなら<wbr>があります。
<h1>
日本語の見出しを<wbr>読みやすく改行する
</h1><wbr>は強制改行ではありません。必要なときだけ、その位置を改行候補として使えます。<br>より画面幅の変化へ合わせやすいのが違いです。
一方、編集のたびに区切り位置を決める手間は増えます。CMSで大量の見出しを扱うなら、全部へ手作業で入れるのは現実的でない場合もあります。
まとまりを絶対に切りたくないならinline-blockもある
特定の語句だけを1まとまりにしたい場合は、spanへinline-blockを付ける方法もあります。
<h1>
<span class="phrase">Web制作</span>を
<span class="phrase">もっと分かりやすく</span>する
</h1>.phrase {
display: inline-block;
}inline-blockの中では通常の行分割が起きにくくなるため、「Web制作」の途中で切りたくない、といった意図を持たせられます。
ただし、まとまり自体が画面幅より長いとオーバーフローする可能性があります。短い語句へ限定して使う方法です。
brで固定すると、別の幅でずれやすい
<br>は「ここで必ず改行する」要素です。デザインカンプの1つの幅ではきれいでも、スマホの横幅が変わったり、文字サイズを大きくしたりすると、さらに手前で自動改行が入り、意図しない3行になることがあります。
コピーとして改行位置そのものに意味があるなら<br>でよい場面もあります。単に見た目を整えるためだけなら、まずbalance、必要ならauto-phraseや<wbr>を検討するほうが画面幅へ追従しやすくなります。
text-wrap: prettyは見出しより長い本文向け
text-wrapにはprettyもあります。balanceは見出しなどの短いテキスト向け、prettyはより長い本文でレイアウト品質を優先したいときの値です。
見出しの不自然な改行を直す目的なら、まずbalanceを考えるほうが分かりやすいでしょう。prettyは行末の見栄えを整える別の選択肢で、日本語の文節解析をするauto-phraseの代わりではありません。
画面幅だけでなく、文章と文字サイズも変えて確認する
1つの見出しがきれいに見えても、別の文章で同じ結果になるとは限りません。短い見出し、長い見出し、英数字が混ざったもの、固有名詞が入るものを並べて見ると、指定の向き不向きが分かります。
確認する幅は、たとえば320px、375px、768px、広い画面を用意して、さらに文字を拡大してみます。これは確認用の一例で、特定の幅をCSSへ固定するという意味ではありません。
うまく折り返さないときは、継承されたwhite-space: nowrapや、ほかのword-breakの指定が残っていないかも見ます。新しい1行を足しても、前からある指定との組み合わせで結果は変わります。
自動調整と手動指定を、見出しの重要度で分ける
すべての見出しを1文字ずつ調整するのは大変です。まずtext-wrap: balanceで全体を整え、対応ブラウザではauto-phraseを追加します。そのうえで、特に重要なファーストビューの見出しだけ<wbr>や短いinline-blockで調整する、という段階分けが現実的です。
固定の<br>を増やす前に、「長さのバランスを直したいのか」「日本語のまとまりで切りたいのか」「この位置だけ候補にしたいのか」を分けると、使うCSSやHTMLも選びやすくなります！
