CSSでテキストを改行する方法・改行しない方法｜折り返しの制御まとめ
CSSでテキストを改行する方法と、改行しない方法を解説します。
結論から書くと、改行そのものの制御は white-space、長い単語の折り返しは overflow-wrap、日本語の読みやすい位置での改行は word-break: auto-phrase を使います。
▼目的別のプロパティ
| やりたいこと | プロパティ | 値 |
|---|---|---|
| HTMLの改行をそのまま出す | white-space |
pre-line |
| 絶対に改行させない | white-space |
nowrap |
| 長いURLをはみ出させない | overflow-wrap |
break-word |
| 日本語を意味の切れ目で折る | word-break |
auto-phrase |
| 行末の1文字だけ残るのを防ぐ | text-wrap |
balance / pretty |
以下、それぞれ解説します。
テキストの改行方法
改行を許可する方法
結論：HTML内の改行をそのまま画面に出したいときは、white-space を pre-line にします。
.example {
white-space: pre-line;
}pre でも改行は反映されますが、挙動が違います。
▼preとpre-lineの違い
| 値 | 改行 | 連続した空白 | 自動折り返し |
|---|---|---|---|
normal（初期値） |
無視 | 1つにまとめる | する |
pre |
そのまま | そのまま | しない |
pre-line |
そのまま | 1つにまとめる | する |
pre-wrap |
そのまま | そのまま | する |
Webページの本文で使うなら pre-line です。pre は自動折り返しをしないため、長い行があるとコンテナからはみ出して横スクロールが発生します。
データベースに保存した改行付きのテキストを表示する場面では、pre-line か pre-wrap が使えます。インデントの空白も残したいなら pre-wrap を選んでください。
改行を許可しない方法
結論：改行させたくないときは white-space を nowrap にします。
.example {
white-space: nowrap;
}テキストは1行に連続して表示されます。ただし、コンテナからはみ出したぶんは切れずに飛び出します。はみ出しを「…」で省略したい場合は、次の3つをセットで指定します。
.example {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}text-overflow: ellipsis は、overflow: hidden と white-space: nowrap の両方が揃っていないと効きません。1つでも欠けると省略記号が出ないので、3点セットで覚えておくと迷いません。
テキストの折り返し方法
結論：長いURLや英単語がコンテナからはみ出すのを防ぐには overflow-wrap: break-word を使います。
.example {
overflow-wrap: break-word;
}word-wrapはoverflow-wrapの旧名
結論：word-wrap と overflow-wrap は同じものです。別々の機能ではありません。
word-wrap は Internet Explorer が独自に実装したプロパティで、後から標準化されるときに overflow-wrap という名前になりました。現在のブラウザは互換性のために word-wrap も受け付けますが、これから書くコードでは overflow-wrap を使ってください。両方書く必要はありません。
overflow-wrapとword-breakの違い
結論：overflow-wrap は「はみ出すときだけ」単語を割ります。word-break: break-all は「はみ出すかどうかに関係なく」どこでも割ります。
▼2つの違い
overflow-wrap: break-word |
word-break: break-all |
|
|---|---|---|
| 割るタイミング | はみ出すときだけ | 行末に来たら常に |
| 英文の読みやすさ | 保たれる | 単語が途中で切れる |
| 向いている用途 | 本文・コメント欄 | 幅の狭い枠に詰め込むとき |
本文には overflow-wrap: break-word を使ってください。word-break: break-all は英単語を無造作に切るので、英語が混ざる文章では読みにくくなります。
どこでも割ってよいが英語の読みやすさも保ちたい場合は、overflow-wrap: anywhere という値もあります。break-word との違いは、要素の最小幅の計算に折り返しが反映されるかどうかです。フレックスやグリッドの中で意図せず幅が広がる場合は、anywhere を試してみてください。
日本語を読みやすい位置で改行する
結論：word-break: auto-phrase を指定すると、日本語の文節の切れ目で改行されるようになります。「今日は/いい天気」のような自然な位置で折り返せます。
.example {
word-break: auto-phrase;
}日本語は単語の間に空白が無いため、ブラウザは基本的に「入るところまで入れて折る」という動きをします。その結果、「今日はい/い天気」のように意味の途中で切れることがあります。
auto-phrase は、機械学習モデルを使って文節の切れ目を判定し、そこで優先的に改行します。見出しやキャッチコピーのように、読みやすさが重要な短い文で効果が出ます。
使うには、要素に lang="ja" が指定されている必要があります。これが無いと効きません。
<html lang="ja">対応状況は Chrome 119以降で、2026年9月時点では Chromium 系のブラウザのみです。未対応のブラウザでは従来どおりの改行になるだけなので、そのまま指定して構いません。崩れることはありません。
行末に1文字だけ残るのを防ぐ
見出しの最後の1文字だけが次の行に落ちる、いわゆる「泣き別れ」を減らすには text-wrap が使えます。
h2 {
/* 各行の長さを揃える。見出し向け */
text-wrap: balance;
}
p {
/* 最終行が極端に短くなるのを防ぐ。本文向け */
text-wrap: pretty;
}balance は行数の少ない要素（見出しなど）向けで、行の長さを均等に近づけます。pretty は本文向けで、最終行が1単語だけになるのを避けます。
balance は処理コストがあるため、ブラウザ側で対象の行数に上限が設けられています。長い本文に指定しても全体には効きません。見出しには balance、本文には pretty という使い分けにしてください。
どのプロパティを選ぶかの判断
結論：「はみ出す」問題なら overflow-wrap、「改行させたい・させたくない」なら white-space、「読みやすさを上げたい」なら word-break: auto-phrase と text-wrap です。
よくあるのが、レイアウト崩れを直そうとして word-break: break-all を当ててしまい、英文が読みにくくなるケースです。まず overflow-wrap: break-word を試して、それで解決するならそちらを使ってください。
長いURLがはみ出すという症状なら、次の1行で足ります。
.content {
overflow-wrap: break-word;
}改行やインデントの制御は、CSSで2行目以降を1文字下げる方法と組み合わせて使う場面が多いプロパティです。折り返した2行目以降の位置を揃えたい場合はこちらもどうぞ。
CSSの書き方をまとめて学び直したい場合は、Webコーディングにオススメの学習本に学習順をまとめています。フレームワーク側で解決したい場合はCSSでオススメのフレームワークと実装例も参考になります。
