HTML & CSS

リファレンス

CSS

ホワイト スペース

white-spaceプロパティ

テキスト内のTabやスペースなどの空白文字について、表示方法を指定するためのプロパティです。

  • 初期値

    normal

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • normal – 連続する空白は1つの空白として扱い、改行も空白文字として扱います。行ボックスを埋めるために、必要に応じて自動的に行を改行します。初期値です。
  • pre – テキスト内の空白はそのまま出力され、改行は改行コード、もしくはbr要素で行います。
  • nowrap – 空白文字の扱いは「normal」と同様ですが、自動的な行の改行を行いません。
  • pre-wrap – テキスト内の空白はそのまま出力され、改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。
  • pre-line – 連続する空白は1つの空白として扱い、改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。

パターン1

CSSコード例

.main_content .sample_css1 p {
	width: 50%;
	border: 1px solid #65c3f3;
}
.sample_css1 .text1 {
	white-space: normal;
}
.sample_css1 .text2 {
	white-space: pre;
}
.sample_css1 .text3 {
	white-space: nowrap;
}
.sample_css1 .text4 {
	white-space: pre-wrap;
}
.sample_css1 .text5 {
	white-space: pre-line;
}

normalの表示例:

連続する空白は1つの空白として扱い、改行も空白文字として扱います。 行ボックスを埋めるために、必要に応じて自動的に行を改行します。

preの表示例:

テキスト内の空白はそのまま出力されます。 改行は改行コード、もしくはbr要素で行います。

nowrapの表示例:

空白文字の扱いは「normal」と同様ですが、自動的な行の改行を行いません。

pre-wrapの表示例:

テキスト内の空白はそのまま出力されます。 改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。

pre-lineの表示例:

連続する空白は1つの空白として扱います。 改行は改行コード、br要素、または行ボックスを埋めるために必要に応じて自動的に行います。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。