説明
HTMLでは連続した半角スペースやタブといった空白は1つの半角スペースで表示されます。又、改行も無視されます。
white-spaceプロパティで半角スペース、タブ、改行を記述した通りに表示する事が出来ます。

white-spaceプロパティを使うと空白と改行を入力した通りに表示出来ます。
HTMLでは連続した半角スペースやタブといった空白は1つの半角スペースで表示されます。又、改行も無視されます。
white-spaceプロパティで半角スペース、タブ、改行を記述した通りに表示する事が出来ます。
white-spaceプロパティの構文は以下の通りです。
white-space: 設定;
設定は以下が出来ます。
種類 | 説明 |
---|---|
normal | 半角スペースやタグは1つの半角、改行は無視(デフォルト) |
pre | 半角スペースやタグ、改行は記述通り |
pre-wrap | 半角スペースやタグ、改行は記述通りだが、幅一杯になると折り返す |
nowrap | normalの状態プラス、枠を超えても改行されない。 |
white-spaceの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
p {
white-space: pre;
}
<p> 左に連続半角スペース
改行 左にタブ
</p>
上記を表示すると以下になります。尚、分かり易さのため、点線の枠は横幅を120pxに指定しています。
左に連続半角スペース 改行 左にタブ
上記のように記述通りに表示されますが、改行しないと枠をはみ出します。
同じHTMLでpre-wrapを指定した場合は以下になります。
左に連続半角スペース 改行 左にタブ
記述した通りに表示されますが、preと違って親の枠からはみ出る場合は折り返します。
同じHTMLでnowrapを指定した場合は以下になります。
左に連続半角スペース 改行 左にタブ
デフォルトの状態と同じで連続した半角スペースやタブは1つの半角スペースになり、改行は無視しますが、枠を超えても改行されません。改行するには一度タグを閉じるか<br>が必要です。
因みにデフォルトのnormalを同じ文章に適用すると以下になります。
左に連続半角スペース 改行 左にタブ
連続した半角スペースやタブが1つの半角スペースで表示されますが、枠の中で改行されます。
<pre>タグを使うとwhite-spaceでpreを指定したのと同様の表示になります。
<pre>タグのCSSでwhite-spaceによりnormalを指定し、一時的にデフォルト状態にする事も出来ます。
又、preを使わなくても一時的に半角スペースだけ連続して表示したい場合は が使えます。 を連続して記述すると半角スペースが連続で表示されます。
一時的に改行だけしたい場合は<br>タグでも改行出来ます。
・ホームページ作成「整形済みテキストと特殊文字」
<pre>タグや特殊文字の使い方を説明しています。
・ホームページ作成「スタイルシートの定義方法」
外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ