white-spaceプロパティ

値

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

• 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の表示例：

preの表示例：

nowrapの表示例：

pre-wrapの表示例：

pre-lineの表示例：

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

コメントありがとうございます！
運営の参考にさせていただきます。