htmlで少し長めの文章を書いたとき、意図的に改行させたいときありますよね。
よく使うのが<span>
などで包括してをdisplay:blockする方法ですが、ブロック要素にしたくないときもあります。
そんな時に便利なのが、cssでbeforeの疑似要素にcontent: “\A”;とwhite-space: pre;を追加する方法です。
残念ながら、<span>
は使います。
実際に書いてみます。
HTML
1 |
<p class="memo">こんにちは。お元気ですか。お電話ください。<span>090-XXXX-XXXX</span></p> |
この電話番号の直前が改行させたいところです。
電話番号を<span>
で包括します。
CSS
1 2 3 4 |
p.memo span::before{ content: "\A"; white-space: pre; } |
たったこれだけで、display:blockを使わずに、好きなところで改行することができます。
スポンサードリンク