久しぶりの備忘録。面倒なので前置き割愛。
改行コードを直接流し込む
<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のサジェストにもこのブログ名が載るようになった。
こんな辺境の地(ブログ)に訪問するなんて、みんな物好きだよねぇ。。