# white-space

> 要素内の空白文字の処理方法を指定するプロパティです。normal、nowrap、pre、pre-wrapなどがあり、改行やスペースの扱いを制御します。コードブロックの表示やテキストの折り返し制御に重要です。

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

## 構文

```css
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
```

## Tailwindでは

- `whitespace-nowrap` → white-space: nowrap
- `whitespace-pre` → white-space: pre
- `whitespace-pre-wrap` → white-space: pre-wrap

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: テキストを改行させない

```css
white-space: nowrap;
```

### 例2: 空白を保持しつつ自動改行

```css
white-space: pre-wrap;
```

### 例3: コードブロックの整形

```css
.code {
  white-space: pre;
  font-family: monospace;
}
```

## TIPS

nowrapは一行表示、pre-wrapはコードの表示に便利。

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

「改行文字を反映したい」という要望にAIはJSでの<br>変換を提案しがちですが、white-space: pre-line（改行は反映・連続スペースは畳む）で済みます。pre-wrapとの違い（スペースも保持するか）、nowrapが省略記号の三点セット（overflow: hidden + text-overflow: ellipsis）の一角である点もセットで押さえると精度が上がります。

## AIへの依頼文例

- APIから来る改行入りテキストを、JSで加工せずwhite-spaceで改行反映して表示して

## 関連プロパティ

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