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

  • 公開日:2015/11/21
  • 最終更新日:2016/7/11
この記事は最終更新日から3年以上が経過しています。

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!