スマホで日本語の改行が不自然になるとき｜固定の改行を外し、意味のまとまりで折り返す

1. 日本語は、単語の区切りがないまま折り返される

英語は単語の間のスペースで折り返せますが、日本語にはスペースがありません。ブラウザは、決められた規則に沿って文字の間で折り返します。そのため、文の意味とは関係のない位置で行が変わります。

次の見出しを、幅375pxの画面（左右の余白24px、文字26px）で、何も指定せずに折り返した結果です。

個人事業主の小さなサイト
に必要な機能と、公開前に
確認しておきたいこと

「サイト／に」の位置で行が変わっています。意味のまとまりで折り返したいのが、この記事のテーマです。条件はChrome 152（macOS）の標準的な日本語フォントです。OSやフォントが変わると、折り返す位置も変わります。

2. 固定の改行（br）が、スマホで1文字だけ残す

PCで見栄えよく見せるために、文の途中に<br>を入れる書き方があります。画面が狭くなると、その改行にブラウザの折り返しが重なり、短い行が増えます。

同じ見出しに、PC向けの改行を1つ入れた結果です（幅375px）。

個人事業主の小さなサイト
に必要な機能と、
公開前に確認しておきたい
こと

3行で収まっていた見出しが4行になり、最後の行に「こと」だけが残りました。意図した改行（名前の区切りなど）以外の<br>は外し、折り返しはブラウザとCSSに任せる方が安全です。

3. CSSの指定を比べる

同じ見出しに、よく挙げられる指定を当てて、幅375pxで測りました。

text-wrap: balance

MDNは、balanceを見出しや引用など短い文向けの指定とし、各行の文字数を揃えると説明しています。計算が重いため、適用できる行数に上限があります（Chromiumで6行以下、Firefoxで10行以下）。2024年10月から主要なブラウザの最新版で使える状態（Baseline 2024）です。ただし、今回の測定のとおり、日本語の意味の区切りは見ません。

word-break: keep-all

MDNによると、keep-allは中国語・日本語・韓国語の文字の間で折り返さない指定です。英語はスペースで折り返せますが、日本語はスペースがないため、折り返せる位置がなくなり、見出しが画面より広がりました。日本語の見出しには使いません。

word-break: auto-phrase

MDNは、auto-phraseを、言語に応じた解析で自然なまとまりの途中を避ける指定として説明しています。ただし、記載の時点で「実験的（experimental）」と表示されています。この記事では測定していません。使う前に、対象のブラウザでの対応状況を確認してください。

4. 意味のまとまりで折り返す書き方

確実なのは、折り返してよい単位を自分で決める方法です。単位ごとにspanで包み、display:inline-blockにすると、単位の途中では折り返されず、単位の間でだけ折り返されます。

<h1>
  <span>個人事業主の</span><span>小さなサイトに</span><span>必要な機能と、</span><span>公開前に</span><span>確認しておきたいこと</span>
</h1>

h1 span { display: inline-block; }

短い見出しにだけ使います。本文の全文をこの形にすると、直すたびに手間が増えます。文の途中の読点（、）のあとに折り返し位置を作る程度から始めると、保守しやすくなります。

5. 直す順番と、AIへの依頼

1. 見出しと短い文の<br>を探し、意図した改行（名前や住所の区切りなど）以外を外す。
2. 見出しだけ、意味のまとまりでspanを使うか、行の長さを揃えたいときはtext-wrap:balanceを足す。
3. 幅320px・375px・414pxで、行の最後に1〜2文字だけ残っていないかを見る。
4. 修正のあと、本文の言い回しが変わっていないかを読み直す。

AIに頼むときは、次のように範囲を限定します。

スマホ（幅375px）で、見出しの折り返しが不自然です。
・対象：h1とh2だけ
・直したいこと：文の途中の固定の<br>を外し、意味のまとまりで折り返したい
・変えたくないこと：文章の内容、PCの見た目
・使わない指定：word-break: keep-all（日本語で横にはみ出すため）
・確認：幅320px、375px、414pxでの折り返し位置を、行ごとに示してください

横にはみ出したときは、スマホで横にはみ出す原因と直し方もあわせて確認してください。