IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

レスポンシブでPCのときだけ改行しスマホの時は改行しない方法

PCで任意の箇所にいれた改行をスマホでは改行せずに表示したい!っていう、レスポンシブ対応するうえでのあるある。
このあるある問題を解決するとっても簡単な方法をご紹介します。

このような記述の場合

<p>これはレスポンシブ対応時の改行問題を解決する方法です。<br class="br-sp">ここで改行しています。</p>

PCではbrタグで改行されて表示されます。
ここに、任意のクラスを付与しておきます。(例では「br-sp」としました。)
スマホのとき(例では画面サイズが640px以下の場合)はこのbrタグを表示しなければいいので、以下のcssを追記します。

@media screen and (max-width: 640px) {
    .br-sp { display:none; }
}

これで、OK!