• 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の疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。