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

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

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

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

完成形はこちらです。

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

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

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

HTML

<p>スマホの時だけ<br class="br-sp">テキストを改行します</p>

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

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

CSS

// スマホの時だけ改行させるクラス
.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}

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

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

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

まとめ

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

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