CSS

Cascading Style Sheets white-space property.

white-space

　white-spaceプロパティは、ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定する際に使用します。

　white-spaceプロパティは、

  1. ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法
  2. ソース中の改行の表示方法

の２点を指定するプロパティです。この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。

値

normal
ソース中のホワイトスペースを無視。
ソース中の改行を1つの半角スペースとして表示。
ボックスサイズが指定されている場合にはそれに合わせて自動改行する。（初期値）
pre
ソース中のホワイトスペースをそのまま表示。
ソース中の改行をそのまま表示。
ボックスサイズが指定されている場合にも自動改行しない。
nowrap
ソース中のホワイトスペースを無視。
ソース中の改行を1つの半角スペースとして表示。
ボックスサイズが指定されている場合にも自動改行しない。
pre-wrap
ソース中のホワイトスペースをそのまま表示。
ソース中の改行をそのまま表示。
ボックスサイズが指定されている場合にはそれに合わせて自動改行する。
pre-line
ソース中のホワイトスペースを無視。
ソース中の改行をそのまま表示。
ボックスサイズが指定されている場合にはそれに合わせて自動改行する。

初期値・適用対象・値の継承

初期値
normal
適用対象
すべての要素
値の継承
する

Sample

normal を指定

　white-spaceプロパティは、 ・ソース中のホワイトスペース（連続する半角スペース・タブ） ・改行 の表示方法を指定する際に使用します。

HTML source


<p class="sample" style="white-space:normal;">
　white-spaceプロパティは、
    ・ソース中のホワイトスペース（連続する半角スペース・タブ）
    ・改行
の表示方法を指定する際に使用します。
</p>

CSS source


p.sample {
	width: 200px;
	background-color: #99cc00;
}

pre を指定

　white-spaceプロパティは、 ・ソース中のホワイトスペース（連続する半角スペース・タブ） ・改行 の表示方法を指定する際に使用します。

HTML source


<p class="sample" style="white-space:pre;">
　white-spaceプロパティは、
    ・ソース中のホワイトスペース（連続する半角スペース・タブ）
    ・改行
の表示方法を指定する際に使用します。
</p>

CSS source


p.sample {
	width: 200px;
	background-color: #99cc00;
}

nowrap を指定

　white-spaceプロパティは、 ・ソース中のホワイトスペース（連続する半角スペース・タブ） ・改行 の表示方法を指定する際に使用します。

HTML source


<p class="sample" style="white-space:nowrap;">
　white-spaceプロパティは、
    ・ソース中のホワイトスペース（連続する半角スペース・タブ）
    ・改行
の表示方法を指定する際に使用します。
</p>

CSS source


p.sample {
	width: 200px;
	background-color: #99cc00;
}

pre-wrap を指定

　white-spaceプロパティは、 ・ソース中のホワイトスペース（連続する半角スペース・タブ） ・改行 の表示方法を指定する際に使用します。

HTML source


<p class="sample" style="white-space:pre-wrap;">
　white-spaceプロパティは、
    ・ソース中のホワイトスペース（連続する半角スペース・タブ）
    ・改行
の表示方法を指定する際に使用します。
</p>

CSS source


p.sample {
	width: 200px;
	background-color: #99cc00;
}

pre-line を指定

　white-spaceプロパティは、 ・ソース中のホワイトスペース（連続する半角スペース・タブ） ・改行 の表示方法を指定する際に使用します。

HTML source


<p class="sample" style="white-space:pre-line;">
　white-spaceプロパティは、
    ・ソース中のホワイトスペース（連続する半角スペース・タブ）
    ・改行
の表示方法を指定する際に使用します。
</p>

CSS source


p.sample {
	width: 200px;
	background-color: #99cc00;
}