brタグにdislpay:none、inlineを適用して改行位置を調整する

brタグにdislpay:none、inlineを適用して改行位置を調整する

brタグにdislpay:noneを設定すると改行されなくなる。
メディアクエリCSSと組み合わせると、デバイス幅に応じて改行位置を設定することが出来る。


画面幅が432px以下の場合は
←ここで改行します。
画面幅が433px~768pxの場合は
←ここで改行します。
画面幅が769px~1024pxの場合は
←ここで改行します。
画面幅が1025pxの場合は
←ここで改行します。

<style>
@media screen and (max-width:432px) {
  /* 画面幅が432px以下の場合 */
  .br432 {display:inline;}
  .br768 {display:none;}
  .br1024{display:none;}
  .br    {display:none;}
}
@media screen and (min-width:433px) and ( max-width:768px) {
  /* 画面幅が433px以上768px以下 */
  .br432 {display:none;}
  .br768 {display:inline;}
  .br1024{display:none;}
  .br    {display:none;}
}
@media screen and (min-width:769px) and ( max-width:1024px) {
  /* 画面幅が769px以上1024px以下 */
  .br432 {display:none;}
  .br768 {display:none;}
  .br1024{display:inline;}
  .br    {display:none;}
}
@media screen and (min-width:1025px) {
  /* 画面幅が1024px以上 */
  .br432 {display:none;}
  .br768 {display:none;}
  .br1024{display:none;}
  .br    {display:inline;}
}
</style>
Mam's WebSite