CSSの擬似要素を使って改行する

久しぶりの備忘録。面倒なので前置き割愛。

改行コードを直接流し込む

<span class="cr">ピカマンよ</span><span class="lf">ああピカマンよ</span><span class="crlf">ピカマンよ</span><span>by マサラ人</span>

span.cr::after,
span.lf::after,
span.crlf::after {
	white-space: pre;
}

span.cr::after {
	content: "\d";
}

span.lf::after {
	content: "\a";
}

span.crlf::after {
	content: "\d\a";
}

ピカマンよああピカマンよピカマンよby マサラ人

CR(0x0D)やLF(0x0A)といった改行コードを直接入れる。
見ての通り、改行されるのはLFだけで、CRは除去される。*1

また、改行コードだけではHTMLでは改行と認識されない。
その為、white-space: pre;で改行コードを改行として認識させる。

ブロック要素で改行

<span class="br">ピカマンは神です。</span><span>偉い人にはそれがわからんのです。</span>

span.br::after {
	content: "";
	display: block;
}

ピカマンは神です。偉い人にはそれがわからんのです。

擬似要素をブロック要素にすると、そのポイントで強制的に改行できる。

サンプルはafterしか載せてないが、もちろんbeforeでも可能。

…以上。

今日でこのブログを開設してからちょうど半年。
いつからかGoogleのサジェストにもこのブログ名が載るようになった。
こんな辺境の地(ブログ)に訪問するなんて、みんな物好きだよねぇ。。

*1:但しIE9のみ例外で、CR単体でも改行として認識する。