見出しの改行をきれいにするCSS｜text-wrap: balance・prettyと日本語の改行4種類

見出しが2行になったとき、2行目に「こと」「方法」だけがぽつんと残る。日本語のサイトでよく見る形です。CSSの text-wrap: balance を1行足すと、ブラウザが行の長さをそろえて折り返してくれます。

使いどころは、2〜3行に収まる見出しと短いキャッチコピーです。本文の長い文章には balance ではなく pretty を使うか、何も付けません。  で改行を固定するより、画面の幅が変わっても崩れにくい方法です。

この記事の要点

text-wrap: balance で見出しの各行の長さをそろえ、text-wrap: pretty で文章の最後の行が短くなりすぎないようにできる
使いどころは、2〜3行に収まる見出しやキャッチコピー。日本語は word-break: auto-phrase（Chrome）や inline-block の区切りと組み合わせると、言葉の途中で切れにくい
balance は6行（Chromium）を超える文には効かない。対応していないブラウザでは、ふつうの折り返しに戻るだけ

連載「WEBの技術」の54回目です。
今回は動きのない、地味なCSSです。ただ、見出しの改行は、サイトの第一印象をかなり左右すると考えています。

完成見本：見出しの改行を整える4種類

どの見本も、上が「指定なし」、下が「指定あり」です。1・3・4は、点線の箱の幅が自動で広がったり縮んだりしています。幅が変わっても、下の見出しは行の長さがそろったままです。2は、文章の最後の行を見比べてください。

BALANCE1. 見出しの行の長さをそろえる見出し・ボタンの上の短い文に

指定なし

お問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。

text-wrap: pretty

PRETTY2. 最後の行に1文字だけ残さない説明文・リード文に

AUTO PHRASE3. 言葉の途中で改行しない日本語の見出し（Chromeで効く）

INLINE BLOCK4. 改行してよい場所を自分で決めるどのブラウザでも同じ改行にしたい見出しに

※ 見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。3はChromeとEdgeで見たときだけ、上下の違いが出ます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-tw は、サイトのほかのデザインと名前がぶつからないようにするための目印です。見出しの文字の大きさなどは、1〜4で同じ指定を使っています。

1. 見出しの行の長さをそろえる

text-wrap: balance を付けると、ブラウザが「各行の文字数がなるべく同じになる」ように折り返す位置を選び直します。2行目に2〜3文字だけ残る見出しが、半分ずつの2行になります。

HTML

<h2 class="kd-tw-head kd-tw-balance">ホームページを新しくする前に、決めておきたい3つのこと</h2>

CSS

/* 見出しの見た目（1〜4で共通） */
.kd-tw-head {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.kd-tw-balance {
  text-wrap: balance;   /* 行の長さをそろえる */
}

2. 最後の行に1文字だけ残さない

text-wrap: pretty は、文章の最後の行が極端に短くならないように、少し前の行から折り返し位置を調整します。行の長さを全部そろえる balance と違い、ふつうの文章の形のまま、最後の行だけを整えます。

指定なし

text-wrap: pretty

HTML

<p class="kd-tw-pretty">お問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。</p>

CSS

p.kd-tw-pretty {
  margin: 0;
  line-height: 1.8;
  text-wrap: pretty;    /* 最後の行を短くしすぎない */
}

3. 言葉の途中で改行しない

word-break: auto-phrase は、日本語の文を「言葉のまとまり（文節）」で区切り、そのまとまりの途中では改行しないようにします。lang="ja"（日本語だという目印）が必要です。今はChromeとEdgeで効き、ほかのブラウザではふつうの折り返しになります。

HTML

<h2 class="kd-tw-head kd-tw-phrase" lang="ja">今日から使える、読みやすい見出しの書き方と改行のコツ</h2>

CSS

/* 見出しの見た目（1〜4で共通） */
.kd-tw-head {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.kd-tw-phrase {
  word-break: auto-phrase; /* 文節の途中で改行しない */
  text-wrap: balance;      /* 1と組み合わせる */
}

4. 改行してよい場所を自分で決める

見出しを「ここで切ってよい」まとまりごとに span で包み、display: inline-block を付けます。まとまりの中では改行されにくくなり、幅が足りないときは、まとまりの切れ目で改行されます。古い書き方ですが、どのブラウザでも同じように効きます。

HTML

<h2 class="kd-tw-head"><span class="kd-tw-nb">ホームページを</span><span class="kd-tw-nb">新しくする前に、</span><span class="kd-tw-nb">決めておきたい</span><span class="kd-tw-nb">3つのこと</span></h2>

CSS

/* 見出しの見た目（1〜4で共通） */
.kd-tw-head {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.kd-tw-nb {
  display: inline-block; /* このまとまりの中では改行しない */
}

サイトの見出しすべてに効かせるなら、クラス名を使わず h1, h2, h3 { text-wrap: balance; } のように書くこともできます。

仕組み：ブラウザが改行の位置を選び直している

ふつうの折り返しは「入るだけ詰める」

何も指定しないとき、ブラウザは1行目に入るだけ文字を詰め、入らなくなったところで次の行へ送ります。そのため、見出しの長さと箱の幅の組み合わせによっては、2行目に数文字だけが残ります。

balance は、行の長さが同じになる位置を探す

MDNによると、text-wrap: balance は、各行の文字数がなるべく同じになるように折り返します。計算の負担が大きいため、Chromium系（Chrome・Edge）では6行以下、Firefoxでは10行以下の文にだけ効きます。見出しのような短い文のための指定です。

行の長さはそろいますが、箱そのものの幅は変わりません。見本の点線の箱も、右側に空きが残ったままです。背景色を付けた見出しでは、この空きが目立つことがあります。

pretty は、最後の行を整える

text-wrap: pretty は、速さより見た目を優先して折り返しを決めます。MDNには、本文のような長い文章向けで、表示の速さに影響があると書かれています。手元のChromeで日本語の文を試したところ、最後の行が2文字になる幅で、3文字に増える程度の変化でした。目立つ変化ではないので、「付けておくと少し整う」くらいに考えておきます。

日本語は、どこでも改行できてしまう

英語は単語と単語の間の空白で改行されます。日本語には空白がないので、ブラウザは基本的にどの文字の間でも改行します。1の見本で、balance を付けても「前」と「に」の間で切れているのはそのためです。

word-break: auto-phrase は、ブラウザが日本語の文を言葉のまとまりに分け、そのまとまりの途中では改行しないようにする指定です。MDNの対応表では、Chrome 119から使え、Chromeでは日本語と韓国語に効きます。FirefoxとSafariの正式版では、まだ使えません。対応していないブラウザでは、ふつうの折り返しになるだけです。

4の inline-block は、まとまりを1つの箱にする古い書き方です。どこで切るかを自分で決められて、どのブラウザでも同じように効きます。

数値を変えるとどうなるか

3つを組み合わせると

同じ見出しを、同じ幅（1行に12文字ほど入る幅）で並べました。

指定なし

balance だけ

balance ＋ auto-phrase

balance だけでは、行の長さはそろっても、言葉の途中で切れることがあります。auto-phrase を一緒に付けると、言葉のまとまりを守ったまま長さをそろえます。Chrome以外では、真ん中と同じ形になります。

長い文章に balance を付けると

お問い合わせフォームを新しくしました。入力する項目を減らし、スマホからでも送りやすくしています。送信のあとに届く確認メールの文面も、分かりやすく書きかえました。一度送った内容をあとから確かめられるように、送信の控えをメールで受け取れるようにもしました。届かないときの確かめ方も、ページの下にまとめています。

指定なし

balance：7行以上なので変わらない

7行以上ある文章に balance を付けた例です。Chromeでは、指定なしと同じ形のままです。本文に付けても効かないので、見出しや短い文にだけ付けます。

スマホと、見る人への配慮

で改行を固定しない

パソコンで見たときの改行に合わせて、見出しに   を入れる例をよく見かけます。スマホのように幅の狭い画面では、  の手前でも折り返しが起きるので、1行に1〜2文字だけの行ができます。balance や4の方法なら、幅が変わっても合わせて折り返し直します。

文字を大きくしている人の画面でも

ブラウザの設定で文字を大きくしている人の画面では、1行に入る文字が減ります。balance は、そのときの幅と文字の大きさで計算し直すので、改行を固定する方法よりも崩れにくくなります。見出しは、200%くらいまで拡大して確かめておきます。

読み上げは変わらない

どの方法も、見た目の改行の位置を変えるだけです。文字そのものは変わらないので、読み上げソフトが読む内容は同じです。4の span も、読み上げには影響しません。

やりすぎ注意

pretty を全部の段落に付けると、MDNが書いているとおり表示の速さに影響があります。長い記事ページでは、リード文など目立つ段落にだけ付けます。4の span で長いまとまりを作ると、狭い画面で1つのまとまりが箱に入りきらず、まとまりの中で折り返されます。まとまりは、スマホの幅でも1行に入る長さ（10文字前後まで）にします。

AIに頼むなら

Claudeなどの生成AIに頼むときは、どの文に付けるか、日本語のサイトであることまで伝えると、手直しが減ります。

このサイト（CSSを貼る）の h1・h2・h3 とカードの題名に text-wrap: balance を付けて。
リード文だけ text-wrap: pretty。本文の段落には付けないで。
日本語のサイトなので word-break: auto-phrase も足して、見出しの <br> は外して。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

本文の段落に balance が付いていないか。長い文には効かず、付けても意味がありません
見出しに が残っていないか。スマホの幅で、1〜2文字だけの行ができていないかを見ます
auto-phrase を付けたページに lang=”ja” があるか。WordPressなら、ふつうは html の lang に入っています。ページのソースで確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

サイト全体の見出し（h1〜h3）。1行足すだけで、どの記事の見出しにも効きます。効かないブラウザでも、今までの形に戻るだけです
カードやお知らせ一覧の題名。2行になったときの形がそろい、並べたときにきれいに見えます
トップページのキャッチコピー。ここは4の方法で、改行してよい場所を自分で決めます。どのブラウザでも同じ形にしたい、一番目立つ文だからです

使わない場面

記事の本文。balance は長い文に効きません。pretty も全部の段落には付けません
背景色を付けた見出しで、右の空きが気になるとき。行の長さがそろっても、箱の幅は変わりません。中央寄せにするか、見出しの文を短くするほうが先です
1行に収まる短い見出し。付けても困りませんが、効く場面がありません。サイト全体にまとめて付ける場合は気にしなくて大丈夫です

KAKERUなら、サイト全体の見出しにまず balance を付けます。
そのうえで、トップページのキャッチコピーのように一番目立つ文だけ、改行の場所を自分で決めます。

まとめ

見出しは text-wrap: balance で行の長さをそろえる。6行（Chromium）を超える文には効かない
文章の最後の行は text-wrap: pretty。付けるのは目立つ段落だけ
日本語は word-break: auto-phrase（Chrome）や inline-block の区切りで、言葉の途中で切れにくくする
  で改行を固定しない。スマホで崩れる
対応していないブラウザでは、ふつうの折り返しに戻るだけ

まずは1のコードの text-wrap: balance; を、サイトの見出しに1行足してみてください。スマホの幅で、2行目に数文字だけ残る見出しがどう変わるかを見比べてみてください。

参考にした資料

いずれも2026年11月11日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

MDN「text-wrap」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap
※balance と pretty の意味。ブラウザの対応表（balance は Chrome 114・Firefox 121・Safari 17.5 から、pretty は Chrome 117・Safari 26 から。Firefoxは pretty に未対応）
MDN「text-wrap-style」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap-style
※balance は計算の負担が大きいため、決まった行数（Chromiumは6行、Firefoxは10行）以下の文にだけ効くこと。pretty は速さより見た目を優先する、長い文章向けの値であること
MDN「word-break」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break
※auto-phrase は、言葉のまとまりの途中で改行しないように言語ごとの分析をする値であること。対応表（Chrome 119から。Chromeでは日本語と韓国語に効く。Firefox・Safariの正式版は未対応）
MDN「lang」属性（英語）
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang
※要素の言語を示す属性。親の要素から受け継がれること
MDN「display」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display
※inline-block の意味（文の流れの中に置かれる、1つの箱になる）