CSS 画面サイズに合わせて改行<br>の有無を指定する

レスポンシブなサイトで端末の画面サイズ毎に改行位置を指定する方法。

原理としては改行タグbrにクラスを付与、そのクラスのdisplayプロパティの値を画面サイズによってblockまたはnoneにすることで改行を制御。

HTML

画面幅479px以下で改行します。
画面幅479px以下で改行します。

CSS

.brSp {display: block;}    /*　SP改行　*/
@media screen and (min-width: 480px) {
  .brSp {display: none;}
}

画面サイズ毎の改行パターンを予め用意しておけばいろいろと対応できそう。

.brSp {display: block;}    /* for SP */
.brSpTab {display: block;} /* for SP,Tablet */
.brSpPc {display: block;}  /* for SP,PC */
.brPc {display: none;}     /* for PC */
.brTabPc {display: none;}  /* for Tablet,PC */
.brTab {display: none;}    /* for Tablet */
@media screen and (min-width: 480px) {
  .brSp {display: none;}
  .brSpTab {display: block;}
  .brSpPc {display: none;}
  .brPc {display: none;}
  .brTabPc {display: block;}
  .brTab {display: block;}
}
@media screen and (min-width: 768px) {
  .brSp {display: none;}
  .brSpTab {display: none;}
  .brSpPc {display: block;}
  .brPc {display: block;}
  .brTabPc {display: block;}
  .brTab {display: none;}
}