text-wrap: balanceは、複数行になった見出しの各行の長さを、できるだけ均等にそろえるCSSです。先に要点だけまとめておきます。
- 書き方: 見出しに
text-wrap: balance;を1行足すだけ - 対応ブラウザ: Chrome 114以降、Firefox 121以降、Safari 17.5以降(Can I use、2026年9月30日時点)
- 日本語では: 行の長さはそろうが、言葉の途中で折り返すことはある。文節で折り返す
word-break: auto-phraseは、正式版ではまだChrome系だけ - 採用率: Web Almanac 2025年版で2.67%
見出しの改行崩れ、CSS1行で直せるって知ってました?
見出しがちょうど中途半端な位置で折り返して、1文字だけ次の行にポツンと残る。
レスポンシブ対応をしていると、誰もが一度は見た光景だと思います。
うちでも、動画のカバーフレームでタイトルが変な位置で折り返して崩れる、というのを何度か経験してきました(この件はYouTube用の動画制作でも既に何度か踏んだ罠です)。
この手の見出し改行問題、実はCSS1行で解決できるtext-wrap: balanceというプロパティが2023年から使えるようになっています。
ところが「世界のWeb事情」シリーズの調査元にしているHTTP Archive「Web Almanac」2025年版を見ていたら、この採用率がまだ2.67%しかないという数字が出てきました。
自分のサイトはどうなっているか、実際にgrepして確かめてみます。
text-wrap: balance採用率、わずか2.67%
Web Almanac 2025年版のCSS章のデータによると、text-wrap: balanceを使っているサイトは全体の2.67%、近い性質を持つtext-wrap: prettyはさらに少なく1.71%でした。
2023年にChromeやFirefoxで対応が進み、Safariも2024年(17.5)に追随したばかりの、まだ新しいプロパティなので、「新しいから」という理由はあると思います。
ただ、見出しの折り返し崩れは制作現場でかなり頻繁に起きる悩みのはずで、それをCSS1行で解決できるのに、まだ全体の3%未満しか使っていないというのは意外でした。
ちなみにtext-wrap: balanceは、複数行になったテキストの各行の文字数をできるだけ均等に近づけてくれるプロパティです。
見出しなどの短いテキストで、最後の行だけ極端に短くなる(俗に言う「オーファン」)のを防ぐのに向いています。
本文のような長い文章には向かないため、ブラウザ側も一定の文字数を超えると自動的に効果を切る仕様になっています。
自分のサイトのSCSSをgrepしてみた
「うちはちゃんと対策できてるだろうか」と気になったので、cats-hand.proのSCSSファイル(Cocoon子テーマ側、コンポーネント・プロジェクト層あわせて約20ファイル)をgrep -r "text-wrap"してみました。
結果は0件。
見出しの折り返し対策は、今のところ何もしていませんでした。
特にトップページの.c-top-hero__title(ヒーローセクションの見出し)や.c-top-section-title(セクション見出し)は、画面幅によっては複数行になる作りなので、text-wrap: balanceを当てる候補としてはちょうど良さそうです。
Web Almanacのデータを見ていなければ、このプロパティの存在自体をしばらく忘れたままだったかもしれません。
動画のタイトル改行事故と、地続きだった
実はこの「見出しの改行崩れ」、YouTube用の動画のカバーフレームを作る作業でも何度か踏んでいる罠です。
タイトルの1行目が短い文字数のときに自動改行で不自然な位置に割れてしまい、サブタイトルと重なって崩れる、というパターンを過去に何度か経験して、そのたびに手動で改行位置を調整してきました。
動画側は自作のReact(Remotion)コンポーネントなのでtext-wrap: balanceをそのまま使うわけにはいきませんが、「複数行になりうる見出し要素は、行の文字数バランスまで意識しないと事故る」という教訓自体は、Webページも動画のタイトルもまったく同じでした。
ブラウザのCSSプロパティ1つが、思わぬところで日頃の別の悩みと繋がっていたのは、今回調べていて一番の収穫でした。
知っているだけで直せることは、意外と多い
今回のtext-wrap: balanceのように、知ってさえいればCSS1行で直せる問題は他にもまだありそうです。
採用率2.67%という数字を見て、「自分だけが知らなかったわけじゃない」と少し安心しつつも、知らないままだと一生自動改行に頼って不格好なまま放置することになるので、これを機にうちのサイトにも当てていこうと思います。
