文章の改行位置をbrタグ以外で設定する方法

CSS

2018年11月09日2021年11月11日

一時期、brタグ以外で改行したくて、方法を探していました。
あまり使いどころないかもしれませんが、カンタンだったので紹介します。

疑似要素を使って改行

文章の改行位置をbrタグ以外で設定するには、
spanタグに擬似要素を設定して改行します。
下の例では::beforeに設定していますが、::afterに設定しても同じです。
HTML上では、改行位置にspanを記述します。

<p>文章の改行がCSSでできる方法サンプルです。<span class="br"></span>文章の改行がCSSでできる方法サンプルです。<span class="br"></span>文章の改行がCSSでできる方法サンプルです。</p>

1 2	<p>文章の改行がCSSでできる方法サンプルです。<span class="br"></span>文章の改行がCSSでできる方法サンプルです。<span class="br"></span>文章の改行がCSSでできる方法サンプルです。</p>

contentに入っている\Aというのが改行を指示します。

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

.br::before {

content: "\A";

white-space: pre;

}

文章の改行がCSSでできる方法サンプルです。文章の改行がCSSでできる方法サンプルです。文章の改行がCSSでできる方法サンプルです。

cssでの改行については、こちらの記事を参考にさせていただきました。
CSSでbr要素みたいに改行する方法｜syncer

複数の方法を知っておくと、状況に応じて使い分けられて便利です。