[css]display:blockを使わずに好きなところで改行させるcontent: “\A”;

htmlで少し長めの文章を書いたとき、意図的に改行させたいときありますよね。

よく使うのが<span>などで包括してをdisplay:blockする方法ですが、ブロック要素にしたくないときもあります。

そんな時に便利なのが、cssでbeforeの疑似要素にcontent: “\A”;とwhite-space: pre;を追加する方法です。

残念ながら、<span>は使います。

実際に書いてみます。

HTML

<p class="memo">こんにちは。お元気ですか。お電話ください。<span>090-XXXX-XXXX</span></p>

1	<p class="memo">こんにちは。お元気ですか。お電話ください。<span>090-XXXX-XXXX</span></p>

この電話番号の直前が改行させたいところです。
電話番号を<span>で包括します。

p.memo span::before{
content: "\A";
white-space: pre;
}

p.memo span::before{

content: "\A";

white-space: pre;

}

たったこれだけで、display:blockを使わずに、好きなところで改行することができます。