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

コード



.br::before {
    content: "\A";
    white-space: pre;
}

プレビュー


あいう
えお

解説

改行したい文字を、brクラスを付与したspanタグで囲んで使用します。
そして、CSSでは.br::beforecontentプロパティに\Aを指定します。
※AはISO-10646の改行コードで\でエスケープして使用します。

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

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

参考