CSSでbrタグみたいに改行する方法

投稿日: / 更新日:

br要素は本来、デザイン目的で使ってはいけません。ではスタイルシートで改行させるにはどうすればいいか?:before:after\Aを指定することで実現できます。

サンプルコード

通常版

下記は、br要素を使わずに対象部分の直前を改行するサンプルコードです。:beforeに指定なので、直前に改行が挿入されます。

<p>われわれは<span class="br">宇宙人</span>だ</p>
.br:before {
	content: "\A" ;
	white-space: pre ;
}

フォントアイコン版

FontAwesomeを利用して、フォントアイコンの直後に改行が入るように調整したサンプルコードです。このように、メニューコンテンツの表示にも適していますね。

<p class="menu-android">メニュー名</p>
.menu-android:before {
	content: "\f17b\A" ;
	white-space: pre ;

	font-family: FontAwesome ;
	font-size: 2em ;
	color: #A4C639 ;
}

.menu-android {
	text-align: center ;
}

説明

\Aとは?

\Aは、改行を示すコードです。スタイルシートのcontentプロパティにこの値を加えると、その場所が改行されます。

white-space

HTMLのソースコードで改行しても、ブラウザで表示した時には改行されていませんよね。ちょこっとスペースが空くだけです。だけど、pre要素やtextarea要素内だったら、ソースコード上の改行がブラウザでも反映されます。

このwhite-spaceプロパティの値をpreにすることで、pre要素と同様に、改行がブラウザに反映されるようになるということです。