【CSS】空白や行の折り返しを指定するwhite-space

white-spaceプロパティは、pre要素のように要素内の空白文字をどのように扱うかを定義します。またtd要素のnowrap属性を使わず、CSSで一律に折り返しの禁止を指定できます。

white-spaceの値
normal	連続する半角空白や改行は詰められて 1 つの半角空白にまとめて表示します。ソース内の改行文字も空白文字として扱われます。必要なら長い行を折り返します。
nowrap	normal と同じく空白を詰めますが、横に長い行でも折り返しをしないで表示します。
pre	連続した空白をそのまま表示します。また長い行でも折り返ししないで表示します。
pre-wrap	連続する空白はそのまま残されます。行の折り返しは、行ボックスを埋めるのに必要なときに行います。
pre-line	連続する空白は詰められて 1 つになります。行の折り返しは、行ボックスを埋めるのに必要なときに行われます。

セレクタ { white-space : 値; }

<style> 
　.normal {white-space:normal;}
　.nowarp{white-space:nowrap;}
　.pre{white-space:pre;}
　.prewrap{white-space:pre-wrap;}
　.preline{white-space:pre-line;}
　　　}
</style>

    <body>
    <p class=" ">要素内の          空白文字  を  ど   のように扱うかを    定義します。</p>
    </body>

▼　上記の空白の入っている文章は、white-spaceの値によって、以下のように表示されます。

white-space:normal;
連続した空白は１つの空白として詰められてます。横幅の右端に当たると自動的に折り返しています。要素内の空白文字をどのように扱うかを定義します。

white-space:nowrap;
空白を詰めますが、横幅の右端から折り返しをしないでボックスっからはみ出て表示されます。要素内の空白文字をどのように扱うかを定義..

white-space:pre;
連続した空白をそのまま表示します。また長い行は横幅の右端から折り返し(改行)をしないでボックスからはみ出て表示されます。要素内の空白文字をどのように扱うかを..

white-space:pre-wrap;
連続する空白はそのまま残されます。行の折り返しは、行ボックスを埋めるのに必要なときに行います。要素内の空白文字をどのように扱うかを定義します。

white-space:pre-line;
連続する空白は 1 つに詰められて表示されます。行の折り返しは、行ボックスを埋めるのに必要なときに行われます。要素内の空白文字をどのように扱うかを定義します。