Tailwindの「whitespace-pre-line」について

whitespace-pre-lineのあるなしでCSSにどんな違いが出るのか

whitespace-pre-line の あり／なし で CSS の挙動には次のような違いが出ます。

✅ white-space プロパティの理解が前提

CSS の white-space プロパティは、空白や改行の扱い方を決めるスタイルです。

🧩 white-space: pre-line の特徴

white-space: pre-line;

🟢 効果：
HTMLソース中の改行 (\n) を表示する

連続スペースは 1 つに縮める（通常の文と同様）

🧪 例：

<div class="whitespace-pre-line">
  あさごはん  
  レクリエーション
</div>

🟰 表示される内容：

あさごはん
レクリエーション

❌ white-space を指定しない（または normal）場合

white-space: normal;

🔴 効果：

• 改行は無視される
• 連続スペースは 1 つに縮まる

表示される内容：

あさごはん レクリエーション
（※すべて 1 行に表示される）

🧭 比較表
CSS値 改行 (\n) 連続スペース 用途例
normal ❌ 無視される 🔽 縮まる 通常の段落
pre-line ✅ 改行される 🔽 縮まる ユーザー入力の再現、改行を保ちつつ整形
pre ✅ 改行される ✅ 保たれる ソースコード表示など
nowrap ❌ 無視される 🔽 縮まる 一行表示など

✅ Tailwind CSS のクラス対応
CSS Tailwind クラス

white-space: normal;	whitespace-normal
white-space: pre;	whitespace-pre
white-space: pre-line;	whitespace-pre-line
white-space: nowrap;	whitespace-nowrap

🎯 結論：whitespace-pre-line を使うと…

HTML のテキスト中にある改行 \n を そのまま表示に反映できます。

ただし、連続スペースは通常通り 1つに縮まるため、整形表示には向いていません。