やりたかったこと
デザインカンプの想定幅(1680px)では説明文が「ここで改行」のあとで折り返して見えるようにしたい、というのが今回の要件です。
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストここで改行
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。
デザインの想定幅(1680px)での見え方:
auto-phrase を検討した
最初は word-break: auto-phrase で解決できないか考えました。ブラウザが日本語の文節を判定して、文節の切れ目でだけ改行してくれる指定です。要素か祖先に lang="ja" が必要です。
p {
word-break: auto-phrase;
}
ところが 2026年11月時点で対応しているのは Chromium 系だけでした。
| ブラウザ | 対応 |
|---|---|
| Chrome / Edge | 119 以降 |
| Safari（macOS / iOS） | 未対応 |
| Firefox | 未対応 |
そもそも auto-phrase は「改行するなら文節の切れ目で」という指定で、特定の位置で改行させる機能ではありません。狙った位置が文節の切れ目と判定されるとも限らず、ブラウザによって変わる挙動に見た目を任せることになるので見送りました。
br の出し分けも考えた
次に、<br> を入れて狭い幅では display: none で消す方法を考えました。ただ、ブレイクポイントとテキストの幅がずれると、「ここで改行」の手前で自然に折り返したあとに強制改行が入り、短い行が挟まります。原文にない改行を HTML に入れることにもなります。
狭い幅で br が残っている場合:
padding-right は右端がずれた
テキストの右側に padding-right で余白を作る方法も試しました。デザインの想定幅ではきれいに折り返しますが、padding-right は画面幅に関係なく常にテキストの幅を削ります。そのため幅が狭めの PC では、この文だけ手前で折り返し、下に続く別の文と右端が揃わなくなりました。
max-width で対応した
最終的に、テキストに max-width を指定しました。
.dummy-text--lead {
max-width: 718px;
}
今回の場合718px がデザインの想定幅で1行目が「ここで改行」まで収まる幅です。max-width はコンテナがこの値より広いときだけ効くので、狭い幅ではほかの文と同じ幅まで広がり、右端が揃ったまま普通に折り返します。HTML に改行を入れないので、文言が変わっても短い行が挟まったりはみ出したりしません。
ただし、フォントや文字サイズが変わると折り返し位置はずれます。あくまで「デザインの想定幅ではきれいに見える」ための対応です。
補足：word-break のほかの値
| 値 | 日本語での改行位置 | 英単語・URL | 対応 |
|---|---|---|---|
normal | 文字単位（禁則処理あり） | 単語の途中では切らない | 全ブラウザ |
break-all | 文字単位 | 単語の途中でも切る | 全ブラウザ |
keep-all | 文字の間で切らない（スペース・句読点などでのみ改行） | normal と同じ | 全ブラウザ |
auto-phrase | 文節単位（ブラウザが自動判定） | normal と同じ | Chromium 系のみ |
break-word | normal と同じ | はみ出す場合だけ途中で切る | 非推奨。overflow-wrap: anywhere で代替 |
auto-phrase は、単独で書いておけば非対応ブラウザでは無視されて normal になるだけなので、見出しを Chrome だけでもきれいにしたい！という使い方なら今でも使えます。