CSSで改行を制御する方法【word-break / overflow-wrap / white-space 解説】

---

1. word-break とは？

単語の途中で改行するかどうかを指定するプロパティです。

.example {
  word-break: break-all;
}

主な値

値	意味
normal	通常の改行
break-all	途中でも強制的に改行
keep-all	単語途中で改行しない

---

break-all の例

<p class="sample">
SuperLongEnglishWord SuperLongEnglishWord SuperLongEnglishWord
</p>

.sample {
  width: 300px;
  border: 1px solid #000;
  word-break: break-all;
}

SuperLongEnglishWord SuperLongEnglishWord SuperLongEnglishWord

→ 単語の途中でも強制的に折り返されます。

---

keep-all の例

.sample {
  word-break: keep-all;
}

SuperLongEnglishWord SuperLongEnglishWord SuperLongEnglishWord

→ 単語は途中で切れません。
※ 日本語ではあまり違いが出ません。

---

2. overflow-wrap とは？

ボックスからはみ出しそうなときだけ折り返すプロパティです。

.example {
  overflow-wrap: break-word;
}

主な値

値	意味
normal	通常
break-word	はみ出る場合に折り返す

---

break-word の例

<p class="sample">
https://e-tome.info/area/tome-city/miyagi-tome-restaurant/
</p>

.sample {
  width: 300px;
  border: 1px solid #000;
  overflow-wrap: break-word;
}

https://e-tome.info/area/tome-city/miyagi-tome-restaurant/

→ 長いURLが枠内で折り返されます。

---

3. word-break と overflow-wrap の違い

比較	word-break	overflow-wrap
強制力	強い	必要なときだけ
主な用途	英単語の強制改行	URL対策

---

4. white-space とは？

改行や空白の扱いを指定します。

.example {
  white-space: nowrap;
}

主な値

値	意味
normal	通常
nowrap	改行しない
pre	改行をそのまま表示
pre-wrap	改行保持＋自動折り返し

---

nowrap の例

<p class="sample">
SuperLongEnglishWord
SuperLongEnglishWord
SuperLongEnglishWord
</p>

.sample {
  white-space: nowrap;
}

SuperLongEnglishWordSuperLongEnglishWordSuperLongEnglishWord

→ 横にずっと伸びます（改行されません）

---

pre の例

<p class="sample">
SuperLongEnglishWord
SuperLongEnglishWord
SuperLongEnglishWord
</p>

.sample {
  white-space: pre;
}

SuperLongEnglishWord
SuperLongEnglishWord
SuperLongEnglishWord

→ 改行をそのまま表示します

---

5. 実務でよく使う組み合わせ

URL対策

.content {
  overflow-wrap: break-word;
}

---

絶対に改行させたくない場合

white-space: nowrap;

---

強制的に折り返したい場合

word-break: break-all;