white-space－スタイルシートリファレンス

トップページ > スタイルシートリファレンス > white-space

★スタイルシートリファレンス

white-space･･･ソース中のホワイトスペース・改行の表示方法を指定する
Internet Explorer

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

white-spaceプロパティは、
１.ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法
２.ソース中の改行の表示方法
の２点を指定するプロパティです。この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。

■値

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

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

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

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

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

HTMLソース

<h5>white-space: normal; を指定</h5>
<p class="sample" style="white-space: normal;">
かえるぴょこぴょこみぴょこぴょこ
    あわせてぴょこぴょこむぴょこぴょこ
</p>

<h5>white-space: pre; を指定</h5>
<p class="sample" style="white-space: pre;">
かえるぴょこぴょこみぴょこぴょこ
    あわせてぴょこぴょこむぴょこぴょこ
</p>

<h5>white-space: nowrap; を指定</h5>
<p class="sample" style="white-space: nowrap;">
かえるぴょこぴょこみぴょこぴょこ
    あわせてぴょこぴょこむぴょこぴょこ
</p>

<h5>white-space: pre-wrap; を指定</h5>
<p class="sample" style="white-space: pre-wrap;">
かえるぴょこぴょこみぴょこぴょこ
    あわせてぴょこぴょこむぴょこぴょこ
</p>

<h5>white-space: pre-line; を指定</h5>
<p class="sample" style="white-space: pre-line;">
かえるぴょこぴょこみぴょこぴょこ
    あわせてぴょこぴょこむぴょこぴょこ
</p>

↓↓↓