LINEで現役エンジニアに直接質問してみよう!登録無料

CSS white-spaceのpre、wrap、nowarapの違いと使い方!効かない時の対処法も解説

この記事の概要

white-spaceは「空白(タブ、改行、半角スペースの総称)」をどのように取り扱うかを決める事が出来ます。

例えば、HTML上の連続したタブやスペースをそのまま表示するのか、1つのまとめて表示するのか。また、行は折り返すのかしないのか。などを決めることが出来ます。

この記事では、Webプログラマのアキ(@hackablejp )が、white-spaceの使い方や、5種類(normal nowrap pre-line pre pre-wrap)の設定値の違いについて解説します。

HTMLでは、「タグとタグの間」や「文章中」に必ずタブや改行、半角スペースが必ず使われます。これはすべて合わせて「空白」と言います(全角スペースは含まれません)。

この空白は時に文章を改行させたり、空白が1つにまとまったりといった、意図しない挙動をを起こす原因になります。

  • この部分は1行で表示したい!
  • 半角スペースは1つにまとめてほしくない!
  • HTML上の文章は改行も含めてそのまま表示してほしい!

このような場合、これから紹介するwhite-spaceが役に立ちます。

注意

もし、文字の途中で改行されるかだけを設定したい時は、white-spaceではなく、overflow-wrap word-break hyphen等のプロパティを使いましょう。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

white-spaceとは?書き方・使い方も解説

white-spaceは要素内の空白文字の取り扱いを指定するプロパティです。空白文字とは、「半角スペース」「タブ」「改行」の事です。

white-spaceは通常のCSSプロパティの1つなので、下記のようにセレクタと一緒に使います。

〇〇 {
  white-space: 値;
}

実際にセレクタや値を使った具体例は下記のようになります。

.example {
  white-space: normal;
}

「値」は"などで囲うことなく、そのまま記述する形になります。

white-spaceで設定出来る値5つ解説

white-spaceで設定出来る値には、5つあります。

white-spaceに設定できる5つの値
  • normal (初期値): 空白がいくつ続いても1つの半角スペースとして扱う
    半角スペース、タブ、改行が連続していても1つ半角スペースがあるものして表示されます。更に、文章が長すぎた場合は自動的に行の折り返しが行われます。
  • nowrap: 基本的にnormalと同じ。ただし文章は折り返されない
    半角スペース、タブ、改行の連続は1つの半角スペースとして扱われます。ただし、文章は自動的に折り返しされません。
  • pre-line: 基本的にnormalと同じ。ただし改行はそのまま表示
    連続で並ぶ半角スペースとタブは1つの半角スペースとして扱われますが、改行はそのまま表示されます。
  • pre: 連続した空白文字はそのまま表示。ただし、文章の折返しはされない
    連続で並んだ空白文字はすべてそのままブラウザに表示されます。ただし、文章は自動的に折り返しされません。
  • pre-wrap: 基本的にpreと同じ。ただし、文章は自動的に折り返されます。
    preとほとんど同じで、自動的に折り返しされる点が異なります。

1つずつ、プロパティの特徴を見ていきましょう!

注意

HTML全体にpre-lineを適用すると、Webページ全体の改行をそのまま表示することが出来て、一見便利に思えますが、それは可能な限り行わないようにして制作するべきです。 なぜなら、全体に適用すると、デザインを変更しようとした時の再修正する箇所が多くなる可能性が高いからです。そのそも、HTML上では空白文字の表現が曖昧で、表示されたりされなかったり、うまく制御出来ない場合もあります。 後々のトラブルを考えた時、改行には専用のタグ(<br>)を使ってくべきです。

normal (デフォルト)

normalを指定した場合の特徴は、下記です。

  • すべての改行、半角スペース、タブの3種類は1つの半角スペースにまとまる
  • 行末のスペースや改行は無視される
  • 行は要素内で自動的に折り返される

実際にwhite-spaceを使った使用例を下記に示します。

このように、normalだと、改行、半角スペース、タブはいくら入力しても1つにまとまってしまうわけです。

ちなみに、行末にも半角スペースを複数挿入していますが、ブラウザ表示上全くわかりませんね。

MEMO

white-spaceはデフォルトで、normalが設定されているので、普通は明示的に指定する必要はありません。今回は、動作確認のため使用例を紹介しました。

nowrap(折り返しなし)

nowrapを指定した場合の特徴は、下記です。

  • すべての改行、半角スペース、タブの3種類は1つの半角スペースにまとまる
  • 行末のスペースや改行は無視される
  • 行は<br>を使わない限り要素内で自動的に折り返さされません!

normal唯一違う点が、行が要素ないで自動的に折り返されないところです。

pre-line(連続する空白文字はそのまま。折返しあり)

  • すべての半角スペースは、タブの2種類は1つの半角スペースにまとまるり、すべての改行はそのまま表示される
  • 行末のスペースは無視されるが、改行はそのまま表示される
  • 行は要素内で自動的に折り返される

実際に例を確認してみましょう

このように、改行がブラウザ上で実際に表示されます。HTML上で複数回改行を入れると、その分だけ表示される改行も増えます。

pre(連続する空白文字はそのまま)

  • すべての改行、半角スペース、タブの3種類はブラウザ上で表示される
  • 行末のスペースや改行もすべて表示される
  • 行は要素ないで自動的に折り返されない

連続する空白文字はそのままブラウザ上に表示されるので、ソースコードのインデントの空白をそのままの形で表示させたい時に使用します。

要素内をはみ出す文字は折り返されず、はみ出すのでoverflow-x:scrollなど、他のプロパティを組み合わせないと見にくいレイアウトになってしまいます。

強制的に改行を行いたい時は<br />を使います。

pre-wrap(連続する空白文字は1つに統合。折返しあり)

  • すべての改行、半角スペース、タブの3種類はブラウザ上で表示される
  • 行末のスペースや改行もすべて表示される
  • 行は要素ないで自動的に折り返される

同じく同じく、インデント等の空白もそのまま表示させたい場合に使用します。ただし、行が要素内で折り返されます。

white-spaceを使ったデザイン紹介

ここで、white-space: nowrap;を使うと行が折り返されない事を利用したデザインの例を1つ紹介します。

長過ぎて要素をはみだ出してしまうテキストを一定以上長くなったら行末を「…」表示するテクニックです。

今回は、white-space: nowrap;だけではなく3種類のCSSプロパティを使います。

  • white-space: nowrap;: 要素内の文字を改行させない
  • overflow: hidden;: はみ出した文字を表示させない
  • text-overflow: ellipsis;: 表示させない部分があったら「…」表示を行う

これらを順番に設定していくと、このようになっていきます。

ここから2つのステップに分けて解説していきます。

  1. 文字を表示する領域の長さを設定する(この幅以上になると「…」表示になる)
  2. white-space: nowrap; overflow: hidden; text-overflow: ellipsis;を追加する
STEP.1
文字を表示する領域の長さを設定

文字を表示する領域の長さを設定します。この幅以上になると「…」表示になります。

今回は幅を250pxに設定しています。

p {
        margin-top: 0;
        width: 250px;
      }
<small>幅の制限したテキスト</small>
      <p class="text">white-spaceには下記の値を設定出来ます</p>
      
STEP.2
「…」表示させるためのCSSを追加しましょう!

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;を追加する

p {
        margin-top: 0;
        width: 250px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
<small>幅の制限したテキスト</small>
      <p class="text">white-spaceには下記の値を設定出来ます</p>
      
完成!

おまけ: HTMLで「pre」というタグもあります。

white-spaceには、preという値を使うことができますが、CSSを使わずともHTMLだけで同様の表示をすることが可能です。 それが<pre>というタグです。

この<pre>タグには、はじめからwhite-space: preが設定されていて、おもに<code>タグと同時に使用され、ソースコードをブラウザ上で生のまま表示させるときに使われます。

しかし、どうしても<pre>内で改行させたいときもあると思います。どのようなときには、下記のように設定します。(あまりそのような状況はありませんが、、)

white-spaceの仕様書

中級者編になりますが、white-spaceにはその仕様を定めている仕様書があります。 英語や、難しい日本語で書かれています。興味のある人は覗いて見るといいでしょう。

初心者は見ても混乱するだけなので、やめておきましょう。

white-spaceに関する役立つサイトとして、以下の3つを紹介します。

まとめ

white-spaceは普段設定しない項目なので、中級者でも忘れていたり迷ってしまう項目です。

全部覚えて使いこなすのは難しいので、「こういうのがあるんだな」という程度にとどめて、使う機会があったらその都度調べて使うのがいいでしょう.

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。