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>