文章中で改行させたい時は基本的にHTMLのbrタグを使用しますが、「brタグを挿入できない位置で改行したい」という稀なケースに遭遇することが先日ありました。
今回は、そんな時に便利なTIPSをメモ。
実は、CSSだけでも改行させることができるんです。
CSSの擬似要素を使って改行させることができる
先ほども述べた通り、改行させたい位置の前後の要素に擬似要素を挿入させ、とあるCSSを指定することで改行させることができます！
一つだけ注意があって、
擬似要素を挿入する要素はinline要素でないとうまく改行されません。
この点だけ頭に入れておいてください。
さて、では実際にCSSで改行する方法をご紹介しておきます。
例：.br_というクラス名の要素の直前で改行させる場合
.br_::before {
content: "\A";
white-space: pre;
}例：.br_というクラス名の要素の直後で改行させる場合
.br_::after {
content: "\A";
white-space: pre;
}さて、これらは何をしているのかも説明しておきますね。
"\A"とはなんぞ？
擬似要素のcontentとして指定している"\A"とは何か。
これは、改行を示すコードなんです。
\nとか\r\nとかは見かけたことがあると思いますが、CSSの擬似要素で改行させる時は\Aなんですね。
white-spaceをpreにしているのはなぜか
これは、改行を反映させるためです。
自分でHTMLを編集している人はわかると思うんですが、HTMLを書く時ってそのファイルの中でタグごとに普通に改行しまくったりしますよね。
それが全てサイトの表示でも「改行」として扱われたらえらいことになるので、サイト内で改行したい時は<br>タグを使うんです。
例えば、以下のように文章中で<br>を使わずにHTMLファイル側で改行したとしてもそれは改行されません。
<p>
ほげほげ1
ほげほげ2
</p>このように「ほげほげ1」と「ほげほげ2」を改行で分けて入力しても、実際にはスペースが1つ空いた状態で表示されますよね。（また、pタグの開始直後や終了直前にもHTML上では改行していますが、これもサイトの表示では「改行」としては認識されませんよね。）
こういったルールがあるため、単純に改行コードである\Aを挿入しても改行にはならんのです。
しかし、改行をそのまま表現することのできるタグってありますよね。
そう、<pre>タグです。
<pre>
ほげほげ1
ほげほげ2
</pre>とすれば、改行やインデントのためのスペースもそのまま出力されます。
この<pre>タグと同じような振る舞いをさせるために必要なのが、white-space:preというCSSだったのです。
CSSだけで改行する実例
実際、この手法はどういった状況で活躍するのか。
私が実際に遭遇したのは、WordPressのフッターに表示させている横並びのリストで改行位置を指定されたケースです。
<li>タグで出力されているリストをわざわざ横並びにさせた上で、さらに「このメニューとこのメニューの間で改行させてほしい！」という無茶なお願いがあったんですよね〜。
他人のサイトで、しかも一般的なテーマを使っているサイトだったので、テンプレートファイルをそのためだけにいじくるのも嫌でした。
JavaScriptで<li>タグの間に<br>を挿入しても表示上はなんとかなるが、HTML構造的にそれはおかしい。
そこで、CSSでの改行がベストだなと。
幸いにも、WordPressのカスタムメニューでは、出力される<li>タグに好きなクラスを指定できるので、改行させたい位置の要素にクラスを付与しておくだけでCSSで改行させることができました。
例：連続するリストの中、「リストC」の後で改行させる
- リストA
- リストB
- リストC
- リストD
- リストE
このリストのHTMLソースは以下のような状態です。
<ul>
<li>リストA</li>
<li>リストB</li>
<li class="br_">リストC</li>
<li>リストD</li>
<li>リストE</li>
</ul>「リストC」のあとで改行させたいので、「リストC」にbr_というクラスをつけ、after擬似要素で改行しています。
もちろん、「リストD」のbefore擬似要素を使っても同じようになります。
