PCで任意の箇所にいれた改行をスマホでは改行せずに表示したい！っていう、レスポンシブ対応するうえでのあるある。
このあるある問題を解決するとっても簡単な方法をご紹介します。
このような記述の場合
【HTML】
|
1 |
<p>これはレスポンシブ対応時の改行問題を解決する方法です。<br class="br-sp">ここで改行しています。</p> |
PCではbrタグで改行されて表示されます。
ここに、任意のクラスを付与しておきます。（例では「br-sp」としました。）
スマホのとき（例では画面サイズが640px以下の場合）はこのbrタグを表示しなければいいので、以下のcssを追記します。
【CSS】
|
1 2 3 |
@media screen and (max-width: 640px) { .br-sp { display:none; } } |
これで、OK！