スマホの時だけテキストを改行する方法

WEBサイトのコーディングをしている時に、スマホの時だけテキストを改行させているレイアウトに出会ったことはないでしょうか?

僕自身PCの時は改行なしで、スマホの時だけテキストを改行させているレイアウトをよく見かけます。

そこで今回は、「スマホの時だけテキストを改行する方法」を紹介します。

スマホの時だけテキストを改行する方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

PCの時は1行で、スマホのレイアウトになるとテキストが改行されていることが分かるでしょう。

それでは実際にコーディングしていきましょう!

※ Google Chrome、Microsoft edge、Firefox、Safariで確認済み

HTML

pタグを用意して、スマホの時に改行させたい部分に対して「br-sp」クラスをつけたbrタグを指定しました。

クラス名は何でもいいですが、スマホの時に改行させるクラスであることが一目でわかるクラス名がいいでしょう。

CSS

「br-sp」クラスがついたbrタグに対して「display: none;」を指定することで、PCの時は改行しないようにします。

そして、600px以下の時に「br-sp」クラスに対して「display: block;」を指定することで、スマホの時だけテキストに改行が効くようにします。

これでPCの時はテキストの改行が無しで、スマホの時だけ改行させることが出来ました。

まとめ

以上が、「スマホの時だけテキストを改行する方法」でした。

是非参考にしてください。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事