HTMLタグの改行コード<br>を使わずにCSSだけで改行したい場合があります。
そんな時に使えるテクニックです。
::beforeを使う場合（spanの前で改行します。）
【CSS】※::beforeの場合
|
1 2 3 4 |
.br::before { content: "\A"; white-space: pre; } |
【HTML】
|
1 |
<p>あいうえお<span class="br">かきくけこ</span>さしすせそ</p> |
【表示例】
See the Pen
wvgEWym by Ketsunosuke (@onoredekaiketsu)
on CodePen.
::afterを使う場合（spanの後で改行します。）
【CSS】※::afterの場合
|
1 2 3 4 |
.br::after { content: "\A"; white-space: pre; } |
【HTML】
|
1 |
<p>あいうえお<span class="br">かきくけこ</span>さしすせそ</p> |
【表示例】
See the Pen
wvgEWym by Ketsunosuke (@onoredekaiketsu)
on CodePen.
display: blockを利用する場合（spanごとに改行します。）
【CSS】※display: blockを利用する場合
|
1 2 3 |
p span { display: block; } |
【HTML】
|
1 |
<p><span>あいうえおかきくけこ</span><span>さしすせそ</span></p> |
【表示例】
See the Pen
vYgzKRm by Ketsunosuke (@onoredekaiketsu)
on CodePen.
以上で解決です。
