[HTML & CSS General] Ignore <br> tags on mobile devices using media queries

公開日: 2019/01/25

メディアクエリーの条件に応じて、<br> タグを有効化したり無効化したりする方法。

スマートフォンの表示だけテキストを改行したい場合などに利用します。
display: inline; と display: none; を切り替えます。

下記では、表示領域が 640px を越えた場合をデスクトップ表示とし、テキスト内の tags の後の改行タグを無効化しています。
ブラウザの横幅を変更するかデバッグモードで確認できます。

See the Pen
wNaRjM by DriftwoodJP (@DriftwoodJP)
on CodePen.