日本語の不自然な改行を CSS だけで直す：word-break: auto-phrase

和文の見出しやカードのタイトルが、語の途中や助詞の前で折り返して読みにくいことがある。CSS のプロパティ 2 つでかなり改善する。

事象

• 長い日本語タイトルが、カードや見出しの幅で機械的に折り返す
• 「〜してい\n る」のように単語の途中で切れる、助詞だけが行頭に落ちる
• 1 文字だけ次の行に残る（孤立行）

原因

ブラウザは和文を文節で区切らない。word-break: normal の既定では、日本語は基本どの文字の間でも折り返せる扱いになる。だから幅が足りなくなった位置でそのまま切れて、語の途中や助詞の前で改行が起きる。英語のように単語間のスペースで折る、という処理が和文には効かない。

解決策

文節単位で折りたいなら word-break: auto-phrase を使う。

.card-title {
  word-break: auto-phrase;
}

ブラウザが文節の区切りを推定して、語の途中で切らずに折ってくれる。Chromium 系で有効。Safari など未対応のブラウザでは無視されて従来どおりの折り返しに戻るだけなので、入れて困ることはない。

見出しの行のばらつき（最終行に 1 語だけ残る等）が気になるなら、text-wrap: balance を足すと各行の長さが均されて孤立行が減る。

.heading {
  word-break: auto-phrase;
  text-wrap: balance;
}

補足

• auto-phrase は比較的新しいプロパティで、対応はブラウザによる。未対応環境でも崩れはしないが「効く環境では整う」という性質の改善
• text-wrap: balance は行数が多い本文には効かない（パフォーマンスのため行数に上限がある）。効かせたいのは見出しや短いリード
• 和文タイトルが多いサイトほど効果が分かりやすい。一覧カードの見た目がそろう