<br>タグを使ったレスポンシブ改行指定

生徒からの質問からあった「スマホでは改行しないで、デスクトップでは改行指定する」ということはできるのかいな?ということで、実験してみました。

単純に考えつくこととしてbrタグを使ってメディアクエリで制御をします。

br {
    display: none;
}
@media (min-width: 768px) {
    br {
        display: static;
    }
}

brを通常display: noneで非表示にし、画面幅768px以上でstaticに戻すところですね。blockではないところがポイントですね。