CSS:空白や改行の表示方法を指定する white-space

半角スペース、タブ、改行の表示方法を指定する場合は、「white-space」で指定します。 初期値は「normal」です。

使用例


white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: nowrap;

説明
normal 連続する半角スペース、タブ、改行をまとめて1つの半角スペースとして表示。 表示内容はボックスの端で自動的に改行されます。
pre 連続する半角スペース、タブ、改行をそのまま表示。入力されたとおりに内容を表示。 表示内容がボックスの端までいっても自動的に改行されません。
pre-wrap 内容がボックスの端で自動的に改行されます。 連続する半角スペース、タブ、改行は「pre」と同じようにそのまま表示されます。
nowrap 連続する半角スペース、タブ、改行をまとめて1つの半角スペースとして表示。 自動的な改行は行われません。

white-space サンプル

white-spaceに値を設定して、表示してみます。
ダミーテキストの中には適当に連続した半角スペースやタブを入れています。

white-space: normal; (初期値)

連続した半角スペース、タブ、改行が1つの半角スペースとして表示され、自動的に改行が行われています。

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

white-space: pre;

連続した半角スペース、タブ、改行がそのまま表示され、自動的な改行は行われません。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

white-space: pre-wrap;

連続した半角スペース、タブ、改行がそのまま表示され、自動的に改行が行われています。

この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

white-space: nowrap;

連続した半角スペース、タブ、改行が1つの半角スペースとして表示され、自動的な改行は行われません。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。

HTML・CSS入門