white-space

ホワイトスペース（テキストとフォント）

意味テキスト内の空白や改行

white-spaceとは？

white-spaceプロパティは、要素内の空白文字（スペースやタブ）と改行の扱いを指定するために使用します。このプロパティによって、テキストがどのように折り返されるか、空白がどのように表示されるかを制御できます。

white-spaceの具体的な使い方

改行なしの一行表示の例

<style>
    p {
        white-space: nowrap;
    }
</style>

<p>このテキストは改行せずに一行で表示されます。</p>

p（段落）要素内のテキストが改行されずに一行で表示されるように設定します。

スペースと改行を保持する例

<style>
  .pre-wrap {
    white-space: pre-wrap;
  }
</style>

<div class="pre-wrap">
  この テキスト は
  スペース と 改行 を
  保持     して表示されます。
</div>

white-space: pre-wrapを使用して、スペースと改行を保持しつつ、必要に応じて折り返すように設定します。

white-spaceに関するよくある質問

Q. white-spaceの主な値は？

A. white-spaceの主な値には、normal（デフォルト）、nowrap、pre、pre-wrap、pre-line、break-spacesがあります。normalは通常のテキスト折り返し、nowrapは折り返しなし、preは整形済みテキスト、pre-wrapは整形済みテキストで折り返しあり、pre-lineは改行のみ保持、break-spacesは全てのスペースを保持して折り返します。

Q. nowrapとpreの違いは？

A. nowrapは全てのテキストを1行に表示し、スペースは1つに縮約されます。一方、preはソースコードの整形をそのまま保持し、スペースと改行を全て維持します。nowrapは長いテキストを1行で表示したい場合に、preはコードブロックなどの表示に適しています。

Q. white-spaceはどんな時に使う？

A. white-spaceは、テキストの空白や改行の扱いを制御したい時に使用します。例えば、1行のみの表示が必要な場合（nowrap）、コードブロックの表示（pre）、長文の折り返し制御（normal, pre-wrap）などに適しています。UIデザインやテキストレイアウトの調整に役立ちます。

white-spaceが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのwhite-spaceやtext-decoration-style、font-family、font-weight、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。