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

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

コード

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

プレビュー

あいう
えお

解説

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

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

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

参考