# word-break

> 単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/word-break/

## 構文

```css
word-break: normal | break-all | keep-all | break-word
```

## Tailwindでは

- `break-all` → word-break: break-all
- `break-keep` → word-break: keep-all
- 補足: 英単語の折り返しなら word-break ではなく break-words（overflow-wrap）が先。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 15+ / Safari 3+ / Edge 12+
- 補足: auto-phrase値のみChrome 119+限定（2026年7月時点）

## コード例

### 例1: 任意の文字で改行（英数字も含む）

```css
word-break: break-all;
```

### 例2: 単語を分割せずに改行

```css
word-break: keep-all;
```

### 例3: 長いURLの改行処理

```css
.url {
  word-break: break-all;
  overflow-wrap: break-word;
}
```

### 例4: 見出しを文節の切れ目で折り返す（Chrome 119+限定）

```css
/* 日本語を文節単位で自然に折り返す */
h1 {
  word-break: auto-phrase;
}
```

## TIPS

日本語サイトではkeep-all、英語サイトではbreak-wordが一般的。

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

AIは「はみ出し対策」にword-break: break-allを多用しがちですが、英単語がぶつ切りになる副作用があります（多くの場合overflow-wrapが正解）。また日本語の見出しにはword-break: auto-phrase（文節改行、Chrome限定）という新しい選択肢があり、AIの知識にはまだ無いことが多い機能です。

## AIへの依頼文例

- 日本語見出しの改行位置が不自然。word-break: auto-phraseとtext-wrap: balanceを組み合わせて、非対応ブラウザでも崩れない形で整えて
- word-break・overflow-wrap・white-spaceの役割分担を整理して、このサイトのテキスト折り返しポリシーを設計して

## 関連プロパティ

- [overflow-wrap](https://www.css-dictionary.com/property/overflow-wrap.md)
- [text-wrap](https://www.css-dictionary.com/property/text-wrap.md)
- [text-spacing-trim](https://www.css-dictionary.com/property/text-spacing-trim.md)