white-space プロパティ
white-space プロパティは、ホワイトスペース(複数の半角スペース、タブ)や改行の表示方法を指定するプロパティです。
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 Animation | No |
Example
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 | テキストの上下位置、上付き、下付き |
| white-space | ホワイトスペース(複数の半角スペース、タブ)や改行の表示方法 |
| word-break | エレメントの領域をはみ出るテキストの折り返し |
| word-spacing | 単語と単語の間の空白を調整 |
| word-wrap | overflow-wrapプロパティの別名 |
