brタグで特定のデバイスのときだけ文章の改行を設定したいときのCSS

こんにちは、社員Kです。
本日は、指定のデバイスで改行のON/OFFを切り替えるシンプルなCSSの紹介です。

ではさっそくCSSの定義から

/* 指定デバイスでON・OFFを切り替える */

/* PCサイズ */
@media (min-width:1024px){
  .tb:not(.pc){
    display: none;
  }
  .sp:not(.pc){
    display: none;
  }
}

/* タブレットサイズ */
@media (min-width:768px) and (max-width:1023px){
  .pc:not(.tb){
    display: none;
  }
  .sp:not(.tb){
    display: none;
  }
}

/* スマホサイズ */
@media (max-width:767px){
  .pc:not(.sp){
    display: none;
  }
  .tb:not(.sp){
    display: none;
  }
}

「pc（パソコン）」「tb（タブレット）」「sp（スマホ）」と3種類のサイズでクラス名を用意しています。
ここは任意のデバイスサイズで調整が可能です。

PCのときだけ改行したい場合

おはようございます。<br class="pc">今日も良い天気ですね！

PCとタブレットで改行したい場合

おはようございます。<br class="pc tb">今日も良い天気ですね！

上記のように複数のデバイスを同時に指定することも出来ます。

また、brでの改行以外にも利用できるCSSなので、参考になれば幸いです。