More than 3 years have passed since last update.

スマホで表示した時のみテキストを改行する方法

Posted at 2021-04-01

テキストの改行でPCだとこのままでいいんだけど、スマホだと改行したい時はありませんか？

私はよくあります。
PCではいい感じでできているのに、スマホ表示にしてみるとなんだかブサイクになってしまう。
そんな時に取り入れたいのが、スマホの時だけ改行する方法。

それでは、見ていきましょう！

スマホの時だけ改行するCSS

まずはHTMLのテキストです。

index.html

<p>このテキストを、<br class="kai">改行する！</p>

クラスのkaiで改行を入れたいと思います。CSSは次の通りです。

style.css

@media screen and (min-width:640px){
  .kai {
    display: none;
  }
}

これで画面サイズが640px以上の時、クラスkaiは表示されません＝スタイルが適用されません。
つまり、スマホで見た時は改行されています。

次は、PCの時だけ改行する方法を見ましょう。HTMLは同じものを使います。

style.css

@media screen and (max-width:639px){
  .kai {
    display: none;
  }
}

これで画面サイズが639px以下の場合に、スタイルが非表示になります。
つまり、スマホページではスタイルが適用されないということです。

以上がデバイスに応じたテキストの改行方法です。