CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － white-space制御

Web APP CSS
スポンサーリンク

white-space は「改行・空白・折り返し」をコントロールするタイポグラフィの基礎

文章がどう折り返されるか、空白がどう扱われるかは 読みやすさ・レイアウトの安定性 に直結します。
white-space を理解すると、テキストの挙動を完全にコントロールできるようになります。

ここでは、CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。

white-space の基本種類とイメージ

normal（デフォルト）

改行 → 無視
空白 → 1つにまとめる
折り返し → する

nowrap

改行 → 無視
空白 → 1つにまとめる
折り返し → しない（横に伸び続ける）

pre

改行 → そのまま
空白 → そのまま
折り返し → しない
→ ほぼ <pre> と同じ

pre-wrap

改行 → そのまま
空白 → そのまま
折り返し → する
→ 長文の整形済みテキストに最適

pre-line

改行 → そのまま
空白 → 1つにまとめる
折り返し → する
→ Markdown のようなテキストに向く

例1：nowrap で「折り返さない」テキストを作る

CSS 版

.nowrap {
  white-space: nowrap;
}
CSS
<p class="nowrap">このテキストは絶対に折り返されません。</p>
HTML

Tailwind 版

<p class="whitespace-nowrap">
  このテキストは絶対に折り返されません。
</p>
HTML

深掘りポイント
nowrap は text-overflow: ellipsis（truncate）とセットで使う のが定番です。
折り返さない → はみ出す → 省略する、という流れ。

例2：pre で「空白も改行もそのまま」表示する

CSS 版

.pre {
  white-space: pre;
}
CSS
<p class="pre">
行頭の空白も  
    インデントも  
そのまま表示されます
</p>
HTML

Tailwind 版

<p class="whitespace-pre">
行頭の空白も  
    インデントも  
そのまま表示されます
</p>
HTML

深掘りポイント
コード例・詩・整形済みテキストなど、
「空白の意味が重要な文章」に最適です。

例3：pre-wrap で「空白も改行も保持しつつ折り返す」

CSS 版

.pre-wrap {
  white-space: pre-wrap;
}
CSS
<p class="pre-wrap">
長い文章でも折り返されますが、
改行や空白はそのまま残ります。
</p>
HTML

Tailwind 版

<p class="whitespace-pre-wrap">
長い文章でも折り返されますが、
改行や空白はそのまま残ります。
</p>
HTML

深掘りポイント
pre-wrap は「ユーザー入力のテキスト」を表示するときに最適。
チャットアプリ・コメント欄・CMS のプレビューなどでよく使います。

例4：pre-line で「改行は保持、空白はまとめる」

CSS 版

.pre-line {
  white-space: pre-line;
}
CSS
<p class="pre-line">
改行はそのまま
空白はまとめられるので
Markdown 的な文章に向いています
</p>
HTML

Tailwind 版

<p class="whitespace-pre-line">
改行はそのまま
空白はまとめられるので
Markdown 的な文章に向いています
</p>
HTML

深掘りポイント
pre-line は「文章の改行だけを尊重したい」場合に便利。
空白が多い文章でも崩れません。

例5：text-overflow と組み合わせる（nowrap が必須）

CSS 版

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
CSS

Tailwind 版

<p class="truncate">
  とても長いタイトルがここに入ります…
</p>
HTML

深掘りポイント
truncate は内部的に whitespace-nowrap を使っています。
つまり、white-space の理解が text-overflow の理解につながります。

例6：ボタン内のテキストを折り返さない（UI でよく使う）

CSS 版

.button {
  white-space: nowrap;
  padding: 0.75em 1.5em;
}
CSS

Tailwind 版

<button class="whitespace-nowrap px-6 py-3 bg-blue-600 text-white rounded">
  長いボタンテキスト
</button>
HTML

深掘りポイント
ボタンは折り返すと高さが変わり UI が崩れるため、
nowrap が非常に有効です。

例7：コードブロックを自然に折り返す（pre-wrap が最適）

CSS 版

.code {
  white-space: pre-wrap;
  font-family: monospace;
}
CSS

Tailwind 版

<pre class="whitespace-pre-wrap font-mono text-sm">
const message = "とても長いコード行が折り返されます";
</pre>
HTML

深掘りポイント
pre だと横スクロールが発生しやすいので、
UI によっては pre-wrap の方が読みやすいです。

white-space の使い分け（ここが一番大事）

normal

通常の文章（本文・説明文）

nowrap

ボタン・タイトル・テーブルセル・省略表示

pre

空白やインデントをそのまま見せたい文章（詩・コード）

pre-wrap

ユーザー入力のテキスト、チャット、コメント

pre-line

改行だけ保持したい文章（Markdown 的）

Tailwind の white-space クラス一覧

whitespace-normal
whitespace-nowrap
whitespace-pre
whitespace-pre-line
whitespace-pre-wrap

Tailwind は white-space の全種類を網羅しているため、
UI に応じて柔軟に使い分けできます。

実務テンプレート：UI でよく使う white-space 設計

タイトル（折り返さない）

<h2 class="whitespace-nowrap truncate font-semibold">
  とても長いタイトルがここに入ります
</h2>
HTML

本文（通常）

<p class="whitespace-normal leading-relaxed">
  本文テキストがここに入ります。
</p>
HTML

ユーザー入力（改行保持）

<p class="whitespace-pre-wrap">
  {{ userInput }}
</p>
HTML

コードブロック（空白保持＋折り返し）

<pre class="whitespace-pre-wrap font-mono text-sm">
  const message = "長いコード行も折り返されます";
</pre>
HTML

まとめ

white-space は
「改行・空白・折り返し」をコントロールするタイポグラフィの基礎技術 です。

ポイントは次の通りです。

  • nowrap → 折り返さない（UI で最もよく使う）
  • pre → 空白も改行もそのまま
  • pre-wrap → 改行保持＋折り返し（ユーザー入力に最適）
  • pre-line → 改行だけ保持
  • Tailwind は whitespace-* で完全対応

スポンサーリンク
タイトルとURLをコピーしました