メインビジュアル部分のテキストなど、PCとスマホで改行の位置を調整したいことは多々あります。今回紹介するのはかなり頻繁に使うテクニックなので、Web制作者の人は覚えておきましょう。

その1：メディアクエリで分岐させる

まずは一番オーソドックスな方法。<br>自体にクラスを付けて、メディアクエリでON・OFFを切り替えるという手法です。

<div>
あのイーハトーヴォのすきとおった風、<br class="spbr">夏でも底に冷たさをもつ青いそら、<br class="spbr">うつくしい森で飾られたモリーオ市、<br class="spbr">郊外のぎらぎらひかる草の波。
</div>

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

これで768px以上のデバイスでは<br>が非表示になるので、スマートフォンでの表示時に狙った位置で改行させることが可能になります。

このコードのサンプルはこちらです。

See the Pen SP-BR_1 by Leo_8192 (@Leo_8192) on CodePen.

CodePenに飛んでブラウザの幅を変えたり、表示倍率を変えたりすると改行のON・OFFが切り替わっているのが分かると思います。

ただこの方法には少し弱点があって、様々なサイズの端末を考慮して調整しようとすると、<br>の数とクラスの数がどんどん増えてしまうんですよね…この解像度ではここで改行させて、この解像度ではここも改行させて…とかやっていると、spbr1、spbr2…みたいな感じでめちゃくちゃHTMLが汚くなるので、もうちょいシンプルに書きたい人は次の方法がオススメです。

その2：文節毎にspanで囲ってinline-blockにする

これ意外と紹介しているところが少ないんですが、何か理由があるんですかね？

<div>
<span>あのイーハトーヴォの</span><span>すきとおった風、</span><span>夏でも底に冷たさをもつ</span><span>青いそら、</span><span>うつくしい森で飾られた</span><span>モリーオ市、</span><span>郊外のぎらぎらひかる</span><span>草の波。</span>
</div>

div span{
	display: inline-block;
}

See the Pen SP-BR_1 by Leo_8192 (@Leo_8192) on CodePen.

こんな感じで文節毎にinline-blockを指定した<span>で囲めば、<br>もメディアクエリを書かずにちょうどいい位置で改行されるようになります。

<span>が増えるというデメリットはありますが、何か特殊な状況じゃない限りはこっちの方法のほうが実装が楽ですね。

ちなみに<span>を入れ子にすれば、複数の文節を一つにまとめてさらに良い感じの位置で改行させることもできるようになります↓

<div>
<span><span>あのイーハトーヴォの</span><span>すきとおった風、</span></span>
<span><span>夏でも底に冷たさをもつ</span><span>青いそら、</span></span>
<span><span>うつくしい森で飾られた</span><span>モリーオ市、</span></span>
<span><span>郊外のぎらぎらひかる</span><span>草の波。</span></span>
</div>

CSSは先ほどと同じです。

See the Pen SP-BR_2 by Leo_8192 (@Leo_8192) on CodePen.

このように入れ子を上手く使えば、縮めたブラウザやタブレット端末では大きな区切りから改行しつつ、スマホのような小さな端末では細かい文節も改行させることが可能になります。

あと、メディアクエリではないのでコンテンツ幅に応じて改行させることが出来るというのも便利ポイント。

---

以上、改行位置の調整方法でした。どっちの方法でも同じような結果が得られるので、そこは上手い具合に使い分けましょう。