white-space/空白・改行処理

説明

　HTMLでは連続した半角スペースやタブといった空白は1つの半角スペースで表示されます。又、改行も無視されます。

　white-spaceプロパティで半角スペース、タブ、改行を記述した通りに表示する事が出来ます。

構文

　white-spaceプロパティの構文は以下の通りです。

white-space: 設定;

　設定は以下が出来ます。

利用例

　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を使わなくても一時的に半角スペースだけ連続して表示したい場合は&nbsp;が使えます。&nbsp;を連続して記述すると半角スペースが連続で表示されます。

　一時的に改行だけしたい場合は<br>タグでも改行出来ます。

関連ページ

・ホームページ作成「整形済みテキストと特殊文字」

　<pre>タグや特殊文字の使い方を説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る