CSSの「white-space: pre-wrap」プロパティを徹底解説

ウェブ開発において、テキストの表示方法を制御することは非常に重要です。特に空白やテキストの折り返しをどう扱うかによって、ユーザー体験や視覚的なデザインが大きく変わります。今回は、CSSのwhite-spaceプロパティの中でも特に便利な値であるpre-wrapについて詳しく解説します。

Contents

white-spaceプロパティとは

white-spaceプロパティは、テキスト内の空白文字（スペース、タブ、改行）をどのように扱うかを指定するCSSプロパティです。このプロパティには以下の値があります：

white-space: pre-wrapは、他の値と比較して以下のような特徴があります：

これはpre（空白と改行を保持するが折り返しなし）とnormal（空白を詰め、改行を無視、自動折り返しあり）の良いとこ取りをしたような値だと考えることができます。

以下はwhite-space: pre-wrapの典型的な使用例です：

.code-block {
  white-space: pre-wrap;
  font-family: monospace;
  background-color: #f5f5f5;
  padding: 1em;
  border-radius: 4px;
}

このスタイルをコードブロックに適用すると、ソースコード内の空白や改行がそのまま表示されながらも、必要に応じて折り返されるため、横方向のスクロールバーが不要になります。

プログラミングコードをウェブページに表示する場合、インデントや改行の維持が重要です。しかし同時に、画面幅を超えるコードは読みにくくなるため、適切な折り返しも必要です。

住所や詩、歌詞など、特定の形式で表示したいテキストにも適しています。

ユーザーが入力したテキスト（コメント、メッセージなど）を表示する際、入力時の改行やスペースを尊重しながらも、レイアウトを崩さないようにしたい場合に最適です。

値	連続する空白	テキスト折り返し	改行コード
`normal`	詰める	あり	無視
`nowrap`	詰める	なし	無視
`pre`	保持	なし	保持
`pre-wrap`	保持	あり	保持
`pre-line`	詰める	あり	保持
`break-spaces`	保持+折り返し可能	あり	保持

white-space: pre-wrapは、すべての主要なブラウザ（Chrome、Firefox、Safari、Edge）で対応しており、IE9以降でもサポートされています。そのため、互換性の心配なく使用できます。

white-space: pre-wrapは、テキストの書式を保持しながらも柔軟なレイアウトを実現できる非常に便利なプロパティです。特にコードの表示やユーザー入力の表示など、整形済みテキストを扱う場面で威力を発揮します。

読んでくれてありがとう！！

money_monkey