スマホとPCで改行位置を変える方法

レスポンシブでサイト制作をしていると、スマホとPCで改行位置を変えたいことがよくあります。その方法のまとめです。

<br>要素にクラスを付ける

br要素にはクラスを付けることができるので、それを利用する方法です。

スマホの場合はこの文の最後で改行されます。<br class="br-sp">パソコンでは改行されません。

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

こうするとスマホで見たときは次のように改行されて表示されます。

スマホの場合はこの文の最後で改行されます。
パソコンでは改行されされません

パソコンでは改行されません。

スマホの場合はこの文の最後で改行されます。パソコンでは改行されされません

疑似要素でcontent:'\A';と指定すると改行することができます。

<span class="br-sp">スマホの場合はこの文の最後で改行されます。</span>パソコンでは改行されません。

@media screen and (min-width:480px){
  .br-sp::after {
    content:'\A';
    white-space:pre;
  }
}

\Aは改行を表すコードです。上記のCSSは擬似的に改行を入れていることになります。

ただし、\Aで挿入した改行はブラウザ内ではHTMLソース内の改行と同じ扱いになります。つまりブラウザ上では改行として表示されません。そこでwhite-space:pre;を指定するとソース上の改行も改行と見なしてくれます。

ちなみにspan要素で囲んだ文の前で改行したい場合は::beforeを使います。

span要素で囲んだ部分をdisplay:inline-block;にするとその中では改行されずブロック毎の改行になります。このことを利用して改行をコントロールする方法です。

<span class="br-sp">スマホの場合はこの文の最後で改行されます。</span><span class="br-sp">パソコンでは改行されません。</span>

@media screen and (min-width:480px){
  .br-sp {
    display:inline-block;
    white-space:no-wrap; /* ブロック内でも絶対改行しないようにしたい場合は必要 */
  }
}

3種類紹介しましたが、一番オススメは疑似要素による改行になります。

一見、<br>タグにクラスを追加するのがスマートに見えますが、<br>タグは文の長さや行間を広げるといったレイアウト目的に使うことは推奨されていません。改行することで意味を区切るような場合に使うものです。

また、サイトデザインをリニューアルしたときにスタイルが設定されていない場合、意図しない改行が入ってしまう可能性があります。

inline-blockにする方法は文字サイズを大きくした場合などに画面からはみ出して横スクロールを発生させる可能性があるのであまりオススメできません。どうせspan要素で囲むなら疑似要素の方がトラブルが少ないと思います。

疑似要素だとスタイルが無ければspan要素が残るだけで何も問題は起こりません（ソースがやや汚くなるという問題はありますが…）。また、span要素は特定の意味をもたない要素なのでコンテンツの内容に影響を与えることもないと思います。