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

white-space プロパティ

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

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

詳しくは Example を参照してください

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

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

ページ内 Index

構文(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ソースで整形された文章をほぼそのままの形で表示することができます。