ボタンや見出しの文字が、枠に入り切らずに中途半端な場所で改行されてしまうこと。
日本語だと特に起きやすいです。
私もボタンの文字を「フォームで」と「相談」の間で改行させたくて、CSSとHTMLで改行位置を指定しました。
そのとき使った方法と、あわせて調べたほかの方法をまとめていきます！
そもそも日本語はどこでも改行されてしまう
英語は単語と単語の間にスペースがあるので、ブラウザはスペースの位置で折り返します。
日本語にはスペースがないため、ブラウザは基本的にどの文字の間でも改行してよいと判断します。
そのため、枠の幅が足りないと「フォームで相」「談」のように、言葉の途中で折り返されることがあります。
これを防ぐには、「ここでは改行しない」か「ここで改行する」をブラウザに教えてあげる必要があります。
以下の方法は、どちらかのやり方で改行位置をコントロールしています。
【方法①】word-break: keep-all と <wbr> を組み合わせる（私が使った方法）
私が使ったのはこの組み合わせです。
CSSとHTMLはこう書きました。
/* CSS */
overflow-wrap: normal;
white-space: normal;
word-break: keep-all;<!-- HTML -->
<strong>フォームで<wbr>相談</strong>これで、枠に入り切らないときは「フォームで」と「相談」の間で改行され、入り切るときは1行のまま表示されます。
word-break: keep-all の役割
word-break: keep-all は、日本語の文字のつながりを1つの単語のように扱う指定です。
これを付けると、文字と文字の間では改行されなくなります。
改行できるのは、スペースや句読点（、。）のあとなどに限られるようです。
「フォームで相談」にはスペースも句読点もないので、このままだとどこでも改行できない状態になります。
<wbr> の役割
そこで使うのが <wbr> タグです。
<wbr> は「必要ならここで改行してもいいよ」という目印で、幅が足りるときは何も起きません。
keep-all で全体を改行禁止にして、<wbr> で改行してよい場所だけを作る、という組み合わせです。
overflow-wrap: normal と white-space: normal について
この2つは、どちらも初期値（何も指定していないときの値）です。
調べた範囲では、親の要素やテーマのCSSで別の値が指定されていなければ、書かなくても同じ動きになるようです。
white-space に nowrap が効いていると折り返し自体がされなくなります。
overflow-wrap に anywhere や break-word が効いていると、はみ出しそうなときに文字の途中で折り返されることがあります。
この2行は、そういった指定を初期値に戻しておく役割になっています。
【方法②】<br> で強制的に改行する
一番シンプルなのは <br> で改行してしまう方法です。
<strong>フォームで<br>相談</strong>ただし <br> は、幅が足りていても必ず改行されます。
パソコンでは1行で表示したいのに、2行になってしまうことがあります。
スマホのときだけ改行したい場合は、<br> にclassを付けて、画面幅で表示を切り替える方法があります。
<!-- HTML -->
<strong>フォームで<br class="sp-only">相談</strong>
/* CSS */
.sp-only {
display: none;
}
@media (max-width: 600px) {
.sp-only {
display: inline;
}
}600pxの部分は、改行させたい画面幅に合わせて変える数字です。
【方法③】inline-block の span で区切る
改行してほしくない言葉のかたまりを、それぞれ span で囲む方法です。
<!-- HTML -->
<strong><span class="phrase">フォームで</span><span class="phrase">相談</span></strong>
/* CSS */
.phrase {
display: inline-block;
}display: inline-block にした span の中は、1つのかたまりとして扱われます。
そのため、改行が起きるのは span と span の間だけになります。
keep-all と <wbr> と考え方は似ていますが、HTMLが少し長くなります。
調べた範囲では、古くから使われている定番のやり方のようです。
【方法④】white-space: nowrap で一部だけ改行を禁止する
「この言葉だけは絶対に途中で切りたくない」という部分がある場合は、その部分だけに white-space: nowrap を付ける方法があります。
<!-- HTML -->
お電話または<span class="nowrap">フォームで相談</span>できます
/* CSS */
.nowrap {
white-space: nowrap;
}span で囲んだ「フォームで相談」は途中で改行されず、前後の文章は通常どおり折り返されます。
方法③の inline-block と似ていますが、nowrap は折り返しを禁止するだけです。
囲んだ部分が枠より長いと、そのまま枠からはみ出すので、短い言葉に使う方法だと思います。
【方法⑤】word-break: auto-phrase で自動的に文節で改行する
word-break: auto-phrase は、ブラウザが日本語の文節を判断して、自然な区切りで改行してくれる指定です。
<wbr> を自分で入れなくても、文節の切れ目で折り返されます。
<!-- HTML（lang="ja" が必要） -->
<html lang="ja">
/* CSS */
.button-text {
word-break: auto-phrase;
}調べた範囲では、日本語であることをブラウザが判断するために、html タグなどに lang=”ja” が指定されている必要があるようです。
便利な指定ですが、2026年9月時点で確認できた対応ブラウザは、Chrome と Edge（バージョン119以降）でした。
Safari と Firefox は未対応です。
未対応のブラウザでは指定が無視されて、通常の折り返しになります。
iPhone（Safari）で見る人が多いサイトだと、これだけに頼るのは難しいと思いました。
【方法⑥】text-wrap: balance で行の長さをそろえる
text-wrap: balance は、改行位置を指定するというより、複数行になったときに各行の長さが近くなるように折り返してくれる指定です。
h2 {
text-wrap: balance;
}見出しが2行になったとき、2行目に1文字だけ残る…という見え方を防ぐのに使われているようです。
2026年9月時点で確認できた範囲では、Chrome・Edge（114以降）、Firefox（121以降）、Safari（17.5以降）の主要ブラウザで対応しています。
ただ、どの位置で改行するかはブラウザが決めるので、「フォームで」と「相談」の間のように場所をピンポイントで決めたいときは、方法①〜④のほうが向いていると思います。
6つの方法の使い分け
調べた内容を表にまとめました。
| 方法 | 改行のされ方 | 向いている場面 |
|---|---|---|
| keep-all＋<wbr> | 幅が足りないときだけ、指定した場所で改行 | ボタン・見出しなど短い文字 |
| <br> | 幅に関係なく必ず改行 | いつも同じ位置で改行したいとき |
| inline-block の span | span と span の間だけで改行 | 言葉のかたまりを守りたいとき |
| white-space: nowrap | 囲んだ部分だけ改行しない | 文章の中の一部の言葉 |
| word-break: auto-phrase | ブラウザが文節で自動的に改行 | Chrome・Edge向けの補助として |
| text-wrap: balance | 行の長さがそろうように改行 | 見出しの見た目を整えたいとき |
つまずきやすいポイント
<wbr> を入れても改行されないときは、white-space: nowrap が親の要素やテーマのCSSで効いていないか確認するといいと思います。 nowrap が効いていると、<wbr> の位置でも折り返されないためです。
反対に、keep-all を付けても言葉の途中で改行されるときは、overflow-wrap に anywhere や break-word が指定されている可能性があります。
私が overflow-wrap: normal と white-space: normal をあわせて書いているのは、こうした指定を打ち消すためです。
まとめ
日本語は文字と文字の間のどこでも改行できてしまうので、狙った位置で折り返したいときは、改行を禁止する指定と改行してよい場所の目印を組み合わせる必要がありました。
私はボタンの文字に word-break: keep-all と <wbr> を使い、幅が足りないときだけ「フォームで」と「相談」の間で改行されるようにしました。
短い文字なら、この方法でHTMLもあまり長くならずに済みました。
調べてみると、<br> や inline-block、nowrap のように昔からある方法のほか、auto-phrase や text-wrap: balance のような新しい指定も出てきていました。
auto-phrase はまだ対応ブラウザが限られているので、今はブラウザの対応状況を見ながら使い分けることになりそうです。
同じように改行位置で困った人に届いたらうれしいです！
