PC/スマホで改行する位置を変えるCSS小技

センター寄せのテキストなんかで、PC向けとスマホ向けで改行位置が違う場合、テキスト自体を出し分けている人が多いようなので、もっと簡単にできる小技をご紹介。

実装

以下のclassを用意します。

@media screen and (min-width: 751px){
	.pc-non {
		display: none !important;
	}
}

@media screen and (max-width: 750px){
	.sp-non {
		display: none !important;
	}
}

@media screen and (min-width: 751px){

.pc-non {

display: none !important;

}

@media screen and (max-width: 750px){

.sp-non {

display: none !important;

}

751px以上のときは、.pc-nonは非表示になり、逆に750以下のときは.sp-nonが非表示になるスタイルです。

「表示させる」だと、blockだったりinlineだったりで使い分けなきゃいけないんですが、「非表示にする」だと非表示にするだけなのでシンプルで良いです。

そして、改行タグ に以下のようにclassをつけましょう

<p>これはPC用の<br class="sp-non">改行</p>
<p>これはスマホ用の<br class="pc-non">改行</p>

<p>スマホでは改行したいけど、<br class="pc-non">PCでは改行したくない</p>

これはPC用の 改行

これはスマホ用の 改行

スマホでは改行したいけど、 PCでは改行したくない

なんと、 にもdisplay:none;が効くんですね！

このclassはbrじゃなくても、いろんな出し分けに重宝するのでぜひ使ってください。

現場からは以上です。