white-space
white-space はテキスト内の空白文字の処理と行の折り返しを一括制御するプロパティです。normal、nowrap、pre、pre-wrap、pre-line、break-spaces の6つの値があります。コードブロックの整形表示（pre）やテキストの折り返し防止（nowrap）など、様々なテキスト表示要件に対応します。
概要
white-space はテキスト内の空白文字の処理と行の折り返しを一括制御するプロパティです。normal、nowrap、pre、pre-wrap、pre-line、break-spaces の6つの値があります。コードブロックの整形表示（pre）やテキストの折り返し防止（nowrap）など、様々なテキスト表示要件に対応します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.nowrap { white-space: nowrap; }
.preserve { white-space: pre-wrap; }
code { white-space: pre; }実務での使いどころ
-
コードブロックの整形表示
プログラミングコードのインデントや空白を保持しつつ、コンテナ幅に合わせて折り返す表示を実現します。
注意点
- white-space: nowrap はテキストの折り返しを完全に防止するため、コンテナからのオーバーフローに注意してください。
アクセシビリティ
- white-space: pre でのコード表示では、横スクロールが必要になる場合にキーボードでのスクロール操作が可能であることを確認してください。