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

  • ブックマーク
  • Feedly
CSSテクニック

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

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

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

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

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

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

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

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

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

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

 

次にCSSはこちら。

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

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

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

 

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

Sponsored Links

PCで表示したときだけ改行するCSS

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

HTMLはこちら。

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

 

そしてCSSはこちら。

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

 

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

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

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

おわりに

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

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

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

  • ブックマーク
  • Feedly