brタグを使わずにCSSのみで改行するテクニック

CSS

brタグを使わずにCSSのみで改行するテクニック

2018年7月3日

コード

<p>あいう<span class="br">えお</span></p>
Markup
.br::before {
    content: "\A";
    white-space: pre;
}
CSS

プレビュー

あいう
えお

解説

改行したい文字を、brクラスを付与したspanタグで囲んで使用します。
そして、CSSでは.br::beforeのcontentプロパティに\Aを指定します。

※AはISO/IEC 10646の改行コードで\でエスケープして使用します。

そしてwhite-spaceにpreを指定することで改行を有効にします。

brタグを使わずにCSSで改行することによって、PCでは改行するがスマホでは改行しない、ということが可能になります。

参考