white-spaceプロパティ
white-spaceプロパティは、ホワイトスペース(複数の半角スペース、タブ)や改行の表示方法を指定するプロパティです。
white-space: pre-wrap;
デフォルトの設定では、エレメントの幅に合わせてHTMLテキストは自動で折り返しされます。改行は半角の1つのスペースに、連続するスペースも1つのスペースに変換されて表示されます。
そのために、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-wrap | overflow-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 Animation | No |
Example
white-spaceの表示例です。改行、タブといった連続するスペース、自動折り返しの表示方法を指定するプロパティです。
このプロパティはHTMLソースで整形された文章をほぼそのままの形で表示することができます。
関連(Related)
HTML、CSS、DOMのテキスト、フォント、編集用途の一覧です。
HTML
- リンク
- <a>
- テキスト
- <br>、 <h2-h6>、 <hr>、 <p>
- マーカー
- <mark>
- 書式方向
- <bdi>、 <bdo>
- 単語の扱い
- <wbr>
- プログラムコード例
- <code>、 <kbd>、 <pre>、 <samp>、 <var>
- 化学式、数式
- <sub>、 <sup>
- 削除された内容や追記された内容の補足
- <del>、 <ins>
- 引用や定義、出典を明示
- <abbr>、 <address>、 <blockquote>、 <q>、 <cite>、 <dfn>
- 日時
- <time>
- ?データ用?
- <data>
- スカラー値、ゲージ
- <meter>、 <progress>
- ルビ
- <rp>、 <rt>、 <ruby>
CSS
- フォント
- color、 font、 font-family、 font-feature-settings、 font-kerning、 font-size、 font-stretch、 font-style、 font-variant、 font-variant-caps、 font-weight
- テキスト配置
- 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
- 回り込み
- clear、 float
- テキスト装飾
- text-decoration、 text-decoration-color、 text-decoration-line、 text-decoration-style、 text-shadow、 text-transform、 text-underline-position
- 書式方向
- direction、 text-orientation、 writing-mode
- 自動挿入
- content、 counter-increment、 counter-reset、 quotes
- 改行
- box-decoration-break、 hyphens
- ユーザー操作
- user-select
DOM
- インターフェイス
- ClipboardEvent
- イベント
- copy、 cut、 paste
- プロパティ
- メソッド