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

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

メニュー項目１

メニュー項目２

メニュー項目３

メニュー項目４

メニュー
項目１

メニュー
項目２

メニュー
項目３

メニュー
項目４

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

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

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

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

<ul>
  <li>メニュー<br>項目１</li>
  <li>メニュー<br>項目２</li>
  <li>メニュー<br>項目３</li>
  <li>メニュー<br>項目４</li>
</ul>

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

CSSのメディアクエリを用いてPC表示時に改行が取り除かれるように設定します。

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

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

以上です。