【CSS】content内で改行やスペースを入力する方法

記事内に商品プロモーションが含まれる場合があります

今回は疑似要素:beforeと:afterでの改行について解説します。content:''内で自分の好きな位置で文を改行したいことってありますよね。ただenterを押しても改行されません。そんなときは以下のように書きましょう。

1. CSSのcontent内で改行する方法

white-space:preを指定＋改行したい位置で\Aと書く

実際に例を見てみるのが分かりやすいですね。

HTML

<p id="example">こんにちは</p>

CSS

#example:before{
	white-space: pre;
	content: 'ウェーイ\Aフゥー！'
	font-size: 2em;
}

white-space:preはコード内の改行が反映されるようにするための指定です。詳しくは以下の記事が参考になるはずです。

CSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？

ボックスの端で自動で折り返す

上記の書き方には1つ注意点があります。それはwhite-space:preだと、文字列がボックスの端まで達したときにも改行がされないということです。\Aを指定しない限り、改行がされないのです。

このようにはみ出てしまうわけですね。ちょっと困りますよね。

自動で折り返すようにしたい場合は、white-space:pre-wrapとします。

CSS

#example{
	width: 200px;
	padding:10px;
	background:#EFEFEF;}
#example:before{
	white-space: pre-wrap;
	content: 'ウェーイウェーイウェーイウェーイ\Aフゥー！';
	font-size: 2em;
}

右端で自動で折り返され、さらに\Aを指定した部分で改行されます。便利ですね。

2. content内で好きなだけスペースを空ける方法

white-space: pre-wrapを指定するだけ

次にスペースを空ける方法です。CSSのwhite-spaceプロパティの初期値はnormalです。このままだとcontent内で半角スペースを連打しても、1つぶんのスペースにまとめられてしまいます。対処法は、white-space: pre-wrapもしくはpreを指定することです。これで、連打した分だけ反映されるようになります。

HTML

<p id="example">こんにちは</p>

CSS

#example:before{
	white-space: pre-wrap;
	content: 'ウェーイ    フゥー！';
	font-size: 1.5em;
}

さきほども触れましたが、pre-wrapにするとボックスの端まで文字が達したときに自動で折り返されます。preだと自動で折り返されることはありません。

ちなみにwhite-spaceの値を変えてなくても、content内に\00a0と入力することでもスペースを開けることができます。content:'ウェーイ\00a0フゥー'という書き方ですね。これはHTMLの と同じような働きをします。