プログラミング勉強日記

2021年3月8日

white-spaceとは

　テキスト内の改行・スペース・タブをどのように扱うか指定できる。

white-spaceの使い方

white-space: 値;

　この値には、normal, nowrap, pre, pre-wrap, pre-lineのどれかを指定する。
　
　normalは初期状態と同じで、HTMLを使用するときのいつも通り表示される。連続した半角スペース/tab/改行を全て1つの半角スペースとして表示し、改行は通常通り横幅いっぱいになったときに行う。
　nowrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。テキスト内で改行を行われた場合に改行する。
　preは、半角スペース/tab/改行をそのまま表示し、改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行する。
　pre-wrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行は横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、preと同様に半角スペース/tab/改行をそのまま表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。

これらを表にまとめると以下のようになる。

値	表示の説明	改行の説明
normal（初期値）	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになったときに改行
nowrap	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	テキスト内で改行を行われた場合に改行
pre	半角スペース/tab/改行をそのまま表示	改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行
pre-wrap	半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行
pre-line	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行

参考文献

CSSで改行ルールを簡単設定！改行をコントロールする方法
 white-space