CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説
CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。
white-spaceプロパティの基本例
以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
white-space: normal;
}
p.demo2 {
white-space: pre;
}
</style>
</head>
<body>
<h2>空白の制御</h2>
<p class="demo1">
This is demo text.
This is demo text.
</p>
<p class="demo2">
This is demo text.
This is demo text.
</p>
</body>
</html>
実行結果のポイント
white-space: normal;（demo1）：連続する空白や改行が1つの半角スペースにまとめられ、テキストは自動的に折り返されます。これがブラウザの初期動作です。white-space: pre;（demo2）：ソースコード中の空白や改行がそのまま表示され、自動的な折り返しは行われません。<pre>タグと同じような挙動になります。
主なwhite-spaceプロパティの値一覧
| 値 | 空白・改行の扱い | 自動折り返し |
|---|---|---|
normal | 連続する空白を1つにまとめ、改行も無視される | あり |
nowrap | 空白は1つにまとめられるが、折り返しされない | なし |
pre | 空白と改行をそのまま保持 | なし |
pre-wrap | 空白と改行を保持しつつ、必要に応じて折り返す | あり |
pre-line | 改行は保持するが、連続する空白は1つにまとめる | あり |
break-spaces | pre-wrapと似ているが、行末の空白も保持して折り返す | あり |
使い分けの目安
- 通常の文章には
normalを使用します。 - コードやアスキーアートなど、整形済みテキストを表示したい場合は
preまたはpre-wrapが便利です。 - ボタンやナビゲーションなど、途中で折り返されたくないテキストには
nowrapを指定します。 - HTMLソース中の改行だけを有効にしたい場合（詩や歌詞など）は
pre-lineが適しています。
このように、white-spaceプロパティを適切に使い分けることで、テキストの見栄えを意図通りにコントロールできます。ぜひ実際のコーディングで活用してみてください。
-
CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法
writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し
-
CSSのpointer-eventsプロパティとは？使い方をコード例で解説
pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります