# text-wrap

> テキストの折り返し方法を制御するプロパティです。balanceで見出しの各行の長さを揃え、prettyで段落末尾の孤立した単語（1文字だけの行など）を防げます。日本語の見出しの不格好な改行対策にも有効です。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-wrap/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/text-wrap

## 構文

```css
text-wrap: wrap | nowrap | balance | pretty | stable
```

## ブラウザ対応

- Baseline 新しく利用可能（2024年3月に全主要ブラウザ対応）
- Chrome 114+ / Firefox 121+ / Safari 17.4+ / Edge 114+
- 補足: balanceは全主要ブラウザ対応。prettyはChrome 117+/Safari 26+のみでFirefox未対応（2026年7月時点）

## コード例

### 例1: 見出しの行ごとの長さを揃えてバランスよく折り返す

```css
h1, h2, h3 {
  text-wrap: balance;
}
```

### 例2: 段落の最終行に1単語だけ残る「孤立行」を防ぐ

```css
p {
  text-wrap: pretty;
}
```

### 例3: 折り返しを禁止（white-space: nowrapと同等の折り返し制御）

```css
.badge {
  text-wrap: nowrap;
}
```

## TIPS

balanceは見出しなど短いテキスト専用です（Chromeは6行までしか処理しない）。全ブラウザ対応が必要な場合も、非対応ブラウザでは単に通常の折り返しになるだけなので、プログレッシブエンハンスメントとして安全に使えます。

## よくある間違い

本文の長い段落にbalanceを指定しても効果がない（行数制限で無視される）うえ、レイアウト計算コストだけかかります。段落にはprettyを使います。また改行位置そのものを指定したい場合はtext-wrapではなく<wbr>やword-breakの領域です。

## AIがよく間違えるポイント

AIはtext-wrap自体を知らない（2024年普及のため学習データにない）か、逆にどこにでもbalanceを付ける過剰提案をしがちです。balanceは短いテキスト向け・prettyは段落向けという使い分け、そしてprettyは2026年時点でFirefox未対応（limited）という対応状況の差をAIはよく間違えます。

## AIへの依頼文例

- カードタイトルの改行が不格好なのでtext-wrap: balanceで整えて。非対応ブラウザでも壊れない書き方で
- この記事ページの見出しと本文に、text-wrapのbalance/prettyを適切に使い分けて適用して
- 日本語見出しの「1文字だけ次の行に落ちる」問題への対策を、text-wrapとword-breakの組み合わせで提案して

## 関連プロパティ

- [white-space](https://www.css-dictionary.com/property/white-space.md)
- [word-break](https://www.css-dictionary.com/property/word-break.md)
- [overflow-wrap](https://www.css-dictionary.com/property/overflow-wrap.md)
- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md)