はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない

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

¯注意
この記事はを最後に更新されていない。
更新日が1年以上前の記事はリンク切れしていたり、情報としては役に立たなくなっている可能性あり。
ˆMixed Contentについて
この記事は投稿日が古い為、記事中の画像は非SSL(http://)で貼られている。(※投稿画像以外は全てSSL)
この件に関して詳しくはこちらを参照。

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



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

<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単体でも改行として認識する。