【css】画面の大きさによって改行の有無を変える方法

2020年2月27日css

一文をページに表示したときに、PCだと一行で表示できるけど、

スマホだと画面が狭いので変なところで改行されて見た目が悪くなってしまうことってありますよね。

そんな時は、CSSだけで改行の有無を変えれちゃうんです！

[サンプル]

パソコンで見ているならブラウザの横幅を変えてみてください。

横幅が1040pxを境目にして、下の文章の改行の有無が変わります。

「あああああ
いいいいい」

[index.html]

あああああ<br class="br-disp">いいいいい

[index.css]

@media screen and (min-width: 1040px) {
  .br-disp {
    display: none;
  }
}

これによって画面の横幅が1040px以上だと改行がなくなって、 1040px未満だと改行が発生します。