• HOME > 
  • CSS > 
  • CSSのwhite-spaceプロパティの使い方【半角スペー...

CSSのwhite-spaceプロパティの使い方【半角スペース・改行の扱いを設定】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2024年03月07日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

white-spaceとは?

CSSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。

HTMLで改行を行うときは<br>タグを用いますが、white-spaceを設定すれば元のテキストに改行があればブラウザでもそのまま改行して表示させることが可能です。

外部から取得したテキストをそのまま表示できる

編集可能なHTMLファイル上のテキストであれば<br>タグを記述して改行させることは容易ですが、外部からテキストデータを取得して表示する場合はそうはいきません。

例えば、ユーザーがテキストエリアを使ってデータベースに保存したテキストを取得して表示したいケースがあります。テキストエリア上での改行には当然<br>タグは挿入されませんので、テキストデータとして呼び出した際には改行されずに表示されてしまいます。

textareaで保存したものを呼び出す

そこで活躍するのがwhite-spaceという訳です。

保存するテキストデータには改行情報が含まれているのでwhite-spaceを設定した要素内に出力するようにすれば、ユーザーが打ち込んだ状態そのままに改行して表示することができます。

textareaで保存したものを呼び出す

HTMLのtextareaの使い方についてはこちらのページをご覧ください。

white-spaceの値の種類と表示の違い

white-spaceプロパティには5つの値を設定できます。

それぞれ半角スペース・改行・タブ・折り返しの扱いが異なるので状況に応じた使い分けが可能です。

  • normal(初期値)
  • nowrap
  • pre
  • pre-wrap
  • pre-line

white-spaceを設定するテキストは以下の通りで、HTML上で改行・半角スペース・タブを入れています。

なお、折り返しの有無をわかりやすくするためwidthとborderも別途設定しています。

HTML

<p>ダミーテキストダミーテキスト改行
ダミーテキストダミーテキスト   ←半角スペース
ダミーテキストダミーテキスト    ←タブ</p>

normal

normalはwhite-spaceの初期値です。white-spaceプロパティを設定していない要素はnormalが適用されます。

元のテキストの半角スペース・改行・タブは全て一つの半角スペースに変換されて表示され、折り返しも行われます。

下の例のように改行はなくなり、4つ打ち込んだ半角スペースもタブも一つの半角スペースだけ表示されています。

CSS

p{
    white-space:normal;
}

プレビュー

white-space:normal

nowrap

nowrapは元のテキストの半角スペース・改行・タブは全て一つの半角スペースに変換されて表示される点はnormalと同じですが、こちらは端で折り返されません

下の例のように要素の幅を超えても折り返しせず一行で表示されています。

CSS

p{
    white-space:nowrap;
}

プレビュー

white-space:normal

pre

preは元のテキストの半角スペース・改行・タブをそのまま表示します。一方でnowrapと同じく端で折り返されません

下の例のように改行はされますが要素の幅を超えても折り返しせず表示されています。

CSS

p{
    white-space:pre;
}

プレビュー

white-space:normal

pre-wrap

pre-wrapは元のテキストの半角スペース・改行・タブをそのまま表示するところはpreと同様ですが、こちらは要素の端で折り返しも行われます。

CSS

p{
    white-space:pre-wrap;
}

プレビュー

white-space:normal

pre-line

pre-lineは元のテキストの半角スペース・タブは全て一つの半角スペースに変換して表示しますが改行はそのまま表示します。要素の端での折り返しも行われます。

CSS

p{
    white-space:pre-line;
}

プレビュー

white-space:normal

まとめ

以上がCSSのwhite-spaceプロパティの使い方です。

データベースから呼び出したテキストデータは改行できないかと思っていましたが、ちゃんとプロパティが存在していました。HTML以外のテキストを表示するときに活躍するので是非覚えておいてください。

広告
広告

関連する記事

サムネイル

CSS内で独自の変数を定義・参照する方法【カスタムプロパティ……

2025年02月06日
今更ながらCSSで変数を使えることを知ったので、今回はカスタムプロパティの使い方について備忘録としてまとめてみます。 CSSのカスタムプロパティとは? CSSの […]
サムネイル

CSSのcounter関数でカウントを行って連番を表示する

2025年02月06日
最近になって、contentプロパティのcounter関数を使えばCSSだけで要素をカウントして連番を表示できることを知りました。本記事ではcounter関数の […]
サムネイル

CSSのattr関数でHTMLの属性値を取得・表示する【ツー……

2025年02月06日
最近になって疑似要素で使うことができるCSSのattr関数の存在を知りました。コーディングの幅を広げる便利な関数だと感じましたので学んだ内容を備忘録としてまとめ […]
サムネイル

CSSのoutlineプロパティの使い方【borderとの違……

2025年02月06日
CSSのoutlineプロパティについて学び直す機会がありましたので、borderとの使い分けを含めて備忘録としてまとめます。 outlineプロパティとは? […]
サムネイル

CSSでPNG画像に影を落とす方法【filterプロパティd……

2025年01月15日
CSSでドロップシャドウをつけるには? CSSで要素に影(ドロップシャドウ)を付ける手段としては「box-shadow」や「text-shadow(テキストの場 […]
サムネイル

CSSのfilterプロパティの関数の種類と効果をまとめ【フ……

2025年01月06日
最終更新日:2025年01月15日
IEのサポートが終了したので、これまで使う機会の少なかったfilterプロパティを改めて調べたところ、CSSでの表現の幅を広げてくれる画期的なプロパティだと気づ […]
サムネイル

CSSで写真にぼかし加工を加える方法【filterプロパティ……

2025年01月06日
CSSだけで写真をぼかせる? CSSのfilterプロパティのblur()関数を使うと、画像(要素)にぼかしを加えることができます。 画像編集ソフトを使うことな […]