【CSS】文章をスマホで表示したときだけ改行する方法は？

この記事では、文章をスマホで見たときだけ改行したいとき、またはPCで見たときだけ改行したいというときに使えるCSSのテクニックについて紹介します。

PCで見ると文章が一行で表示されるけど、スマホで見ると変な位置で改行されてしまうということ、あると思います。

普通のページならそれで良くても、LPなどカチッとしたページを作りたい場合はちゃんと文節の区切りで改行させたいですよね。

この記事で紹介するCSSはそんなときに役立つCSSです。

ぜひ参考にしてみてください。

それではさっそく見ていきましょう！

この記事の内容

スマホで表示したときだけ改行するCSS

それではさっそく、スマホで表示したときだけ改行するCSSについて紹介します。

記述するhtmlコードはこんな感じ。
スマホで改行したい位置にbrタグを書きます。

<p>スマホだけ<br class="br-sp">←ここで改行するテスト</p>

ここでは分かりやすくbrにclass「br-sp」を付けています。

次にCSSはこちら。

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

「@media screen and (min-width:640px)」、すなわちモニタサイズが640px以上のデバイスで見たときだけ、class「br-sp」で「display:none;」が機能します。

つまり、PCやタブレットで見たときはbrタグを表示させないということですね。

実際にサンプルを掲載します。
下記の赤字の文章は、PCやタブレットで見ると一行で表示され、スマホで見ると改行されて表示されます。

スマホだけ
←ここで改行するテスト

ついでに逆バージョンとして、PCで表示したときだけ改行するという方法についても紹介します。

HTMLはこちら。

先ほどと同じ箇所にbrタグを記述して、今度は「pc-br」というclassにしました。

<p>PCだけ<br class="br-pc">←ここで改行するテスト</p>

そしてCSSはこちら。

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

先ほどとは逆で、モニタサイズ639px以下のデバイス、つまりスマホでページを見たときにbrタグを非表示にするというCSSです。

実際のサンプルはこちら。

PCだけ
←ここで改行するテスト

上の赤字の文章は、PCやタブレットで見たら改行されてますが、スマホで見たら改行されないようになっています。

以上、CSSを使ってスマホ表示のときだけ改行する方法、PC表示のときだけ改行する方法について解説しました。

LP作成の際などデバイスに合わせて文字をカチッと表示したいときに役立つテクニックだと思います。

この記事が参考になれば嬉しいです！