備忘録的プログラミングリファレンス

white-spaceプロパティ

　white-spaceプロパティは、ホワイトスペース（複数の半角スペース、タブ）や改行の表示方法を指定するプロパティです。

テキストのホワイトスペースはそのまま、改行を表示、自動で折り返し（Exampleの参照）
white-space: pre-wrap;

　デフォルトの設定では、エレメントの幅に合わせてHTMLテキストは自動で折り返しされます。改行は半角の１つのスペースに、連続するスペースも１つのスペースに変換されて表示されます。
　そのために、HTMLソースで文章を整形しても、ブラウザでは改行もない、半角スペースでの空白もないような状態で表示されます。
　white-spaceプロパティはHTMLソースで整形された文章をほぼそのままの形で表示することができます。

　開発言語によるホワイトスペースとして定義されるフォントとは違います。

関連プロパティ

　以下はテキスト配置に関連するプロパティです。

letter-spacing文字間隔
line-heightテキストの行間
overflow-wrap単語がエレメント内に入りきらない場合の設定
tab-sizeタブのサイズ
text-align右寄せ、中央寄せ、左寄せ
text-align-last最後の行の右寄せ、中央寄せ、左寄せ
text-combine-upright縦書きにおける算用数字（アラビア数字）の配置
text-indent最初の行頭の字下げ幅
text-justify両端揃えにおける単語、文字の間隔
text-overflowエレメントからテキストがはみ出る場合の表記
vertical-alignテキストの上下位置、上付き、下付き
word-breakエレメントの領域をはみ出るテキストの折り返し
word-spacing単語と単語の間の空白を調整
word-wrapoverflow-wrapプロパティの別名

構文(Syntax)

CSS

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.whiteSpace;
値の設定
object.style.whiteSpace="normal | nowrap | pre | pre-line | pre-wrap | initial | inherit";

値（Values）

Value摘要
normal初期値（default値）、ホワイトスペースを省略、改行は半角スペースに、自動で折り返す
nowrapホワイトスペースを省略、改行は半角スペースに、折り返さない
preホワイトスペースはそのまま、改行を表示、折り返さない
pre-lineホワイトスペースを省略、改行を表示、自動で折り返す
pre-wrapホワイトスペースはそのまま、改行を表示、自動で折り返す
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）normal
継承（Inherited）Yes
CSS AnimationNo

Example

　white-spaceの表示例です。改行、タブといった連続するスペース、自動折り返しの表示方法を指定するプロパティです。

　このプロパティはHTMLソースで整形された文章をほぼそのままの形で表示することができます。