white-spaceプロパティは、ソース中のホワイトスペース(連続する半角スペース・タブ)・改行の表示方法を指定する際に使用します。
white-spaceプロパティは、
1.ソース中のホワイトスペース(連続する半角スペース・タブ)の表示方法
2.ソース中の改行の表示方法
の2点を指定するプロパティです。
この2つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。
p.sample { width:200px; background-color:#99cc00; }
<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>
かえるぴょこぴょこみぴょこぴょこ あわせてぴょこぴょこむぴょこぴょこ
かえるぴょこぴょこみぴょこぴょこ あわせてぴょこぴょこむぴょこぴょこ
かえるぴょこぴょこみぴょこぴょこ あわせてぴょこぴょこむぴょこぴょこ
かえるぴょこぴょこみぴょこぴょこ あわせてぴょこぴょこむぴょこぴょこ
かえるぴょこぴょこみぴょこぴょこ あわせてぴょこぴょこむぴょこぴょこ