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

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




実装

以下のclassを用意します。

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

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

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

なんと、<br>にもdisplay:none;が効くんですね!

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

現場からは以上です。

シェアしてくだちい

フォローしてくだちい