要素内の空白文字の処理方法を指定するプロパティです。normal、nowrap、pre、pre-wrapなどがあり、改行やスペースの扱いを制御します。コードブロックの表示やテキストの折り返し制御に重要です。
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces| whitespace-nowrap | white-space: nowrap |
| whitespace-pre | white-space: pre |
| whitespace-pre-wrap | white-space: pre-wrap |
white-space: nowrap;テキストを改行させない
white-space: pre-wrap;空白を保持しつつ自動改行
.code {
white-space: pre;
font-family: monospace;
}コードブロックの整形
nowrapは一行表示、pre-wrapはコードの表示に便利。
「改行文字を反映したい」という要望にAIはJSでの<br>変換を提案しがちですが、white-space: pre-line（改行は反映・連続スペースは畳む）で済みます。pre-wrapとの違い（スペースも保持するか）、nowrapが省略記号の三点セット（overflow: hidden + text-overflow: ellipsis）の一角である点もセットで押さえると精度が上がります。
APIから来る改行入りテキストを、JSで加工せずwhite-spaceで改行反映して表示して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。