CSSのみでレスポンシブデザインのスマホ表示時に思ったところに改行を入れる方法

例えば、以下のようなメニューがあった場合に、画面解像度の小さいデバイスではメニュー項目名の任意の場所で改行し、幅を縮めたいことがあります。

PC表示時

メニュー項目1 メニュー項目2 メニュー項目3 メニュー項目4

スマホ表示時

メニュー
項目1
メニュー
項目2
メニュー
項目3
メニュー
項目4

改行位置をブラウザに任せてしまうと変な位置で改行される心配があるので、確実に「メニュー<br>項目1」としたいです。

CSSのメディアクエリのみで対応できますので参考にしてみてください。

1.改行したい部分に<br>タグを入れておく

まずは改行したい部分に事前に<br>タグを入れておきます。
<ul><li>タグを使ったメニュー項目の場合には以下のような感じでしょうか。

<ul>
  <li>メニュー<br>項目1</li>
  <li>メニュー<br>項目2</li>
  <li>メニュー<br>項目3</li>
  <li>メニュー<br>項目4</li>
</ul>

とりあえずこれでスマホ表示時でもPC表示時にもつねに改行が入ります。

2.CSSのメディアクエリでPC表示時の改行を取り除く

CSSのメディアクエリを用いてPC表示時に改行が取り除かれるように設定します。
以下の例では768pxをブレークポイントとし、iPadやPCで改行が取り除かれる設定にしています。もしiPadでもスマホと同様に改行されてほしい場合には、768pxの部分を992pxとするとよいかと思います。その場合にはPC表示でのみ改行が取り除かれます。

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

以上です。