概要

CSSのwhite-spaceプロパティは、テキストの改行や空白の表示方法を制御するためのプロパティです。ウェブページでのテキストの表示は、デザインやユーザー体験に大きな影響を与えます。white-spaceを使うことで、テキストがどのように表示されるかを細かくコントロールでき、見やすく整ったレイアウトを作成することが可能です。この記事では、white-spaceの基本的な使い方や設定方法、実際の活用例について詳しく解説します。

基本的な使い方

white-spaceの基本構文

.selector {
  white-space: 値;
}

主な値の種類とその説明

  • normal
    デフォルトの設定で、空白は1つに縮約され、テキストは必要に応じて改行されます。最も一般的なテキスト表示のスタイルです。
  • nowrap
    空白は縮約されますが、テキストは改行されずに一行にまとめて表示されます。テキストが長い場合は横にスクロールされます。
  • pre
    空白と改行をそのまま表示します。<pre>タグと同じ動作をし、テキストの整形を保持します。
  • pre-wrap
    空白と改行を保持しつつ、必要に応じて改行も行います。テキストが見切れないようにするために効果的です。
  • pre-line
    空白は縮約されますが、改行はそのまま保持されます。詰まったテキストのレイアウトに適しています。

使用例

基本的な改行制御 - normal

normalはテキストの改行を自動で処理し、空白を縮約します。

.normal-text {
  white-space: normal;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

この設定では、長いテキストが要素の幅に合わせて自動的に折り返され、余分な空白は縮約されます。

改行なしで表示 - nowrap

nowrapはテキストの改行を無視し、すべてのテキストを一行で表示します。

.nowrap-text {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-x: auto;
}

この設定により、テキストが改行されずに表示され、要素の幅を超えると横スクロールが発生します。ナビゲーションやボタンのラベルなど、一行で表示したい場合に便利です。

整形済みテキストの表示 - pre

preは改行や空白をそのまま保持し、テキストの整形を行います。

.pre-text {
  white-space: pre;
  border: 1px solid #ccc;
  padding: 10px;
}

この設定は、コードスニペットや詩のような整形済みテキストをそのまま表示する際に効果的です。

改行