white-space/空白・改行処理

white-spaceプロパティを使うと空白と改行を入力した通りに表示出来ます。

説明

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

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

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

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

関連ページ

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)