【CSS】white-space - ホワイトスペースの振る舞い

CSSのwhite-spaceプロパティについて解説します。

検証環境

CSS

macOS

14.1

white-space

white-spaceは“スペースの振る舞い”のプロパティです。

基本構文

white-space: 値;

値

代表的な値は次の通りです。

値	連続スペース	改行
normal	詰める	自動
nowrap	詰める	なし
pre	そのまま	改行文字
pre-wrap	そのまま	改行文字 / 自動
pre-line	詰める	改行文字 / 自動

サンプル

各値のサンプルを示すにあたり、次のプロパティを合わせて使用します。

プロパティ	説明
width	横幅
background	背景

normal

normalは連続スペースを詰めます。

改行のタイミングはテキストの長さが横幅を越える時です。

sample.html

<style>
p {
    width: 250px;
    background: lightgray;
    ___ih_hl_start
    white-space: normal;
    ___ih_hl_end
}
</style>

<p>
    CSS    :    Cascading Style Sheets
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</p>

プレビュー

nowrap

nowrapは連続スペースを詰めます。

改行はしないため、テキストの長さが横幅を越える場合、はみ出します。

sample.html

<style>
p {
    width: 250px;
    background: lightgray;
    ___ih_hl_start
    white-space: nowrap;
    ___ih_hl_end
}
</style>

<p>
    CSS    :    Cascading Style Sheets
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</p>

プレビュー

pre

preは連続スペースを詰めません。

改行は改行文字（HTMLドキュメント内の実際の改行）に従って行われるため、テキストの長さが横幅を越える場合、はみ出します。

sample.html

<style>
p {
    width: 250px;
    background: lightgray;
    ___ih_hl_start
    white-space: pre;
    ___ih_hl_end
}
</style>

<p>
    CSS    :    Cascading Style Sheets
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</p>

プレビュー

pre-wrap

pre-wrapは連続スペースを詰めません。

改行はテキストの長さが横幅を越える時または改行文字に従って行われます。

sample.html

<style>
p {
    width: 250px;
    background: lightgray;
    ___ih_hl_start
    white-space: pre-wrap;
    ___ih_hl_end
}
</style>

<p>
    CSS    :    Cascading Style Sheets
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</p>

プレビュー

pre-line

pre-lineは連続スペースを詰めます。

改行はテキストの長さが横幅を越える時または改行文字に従って行われます。

sample.html

<style>
p {
    width: 250px;
    background: lightgray;
    ___ih_hl_start
    white-space: pre-line;
    ___ih_hl_end
}
</style>

<p>
    CSS    :    Cascading Style Sheets
    CSS is a programming language that decorates elements such as HTML and XML.
    You can set various properties such as text color, background, and size.
</p>

プレビュー