スマホの時だけ改行させる方法

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

方法は2つあります。

• <br> を PC表示のときだけ display: none; で隠す
• <span>で改行させたくない位置を囲って、 white-space: nowrap; で特定箇所の改行を禁止する

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

br を display: none; で隠す

br タグに class=”spbr” をつけて 画面幅が特定のサイズ以上の時は br タグが消えるようにします。
今回は 画面サイズが600px 以下なら br の箇所で改行する。

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

単語を span で囲って改行させない CSS を付与する

span には class=”long_word” を付与している。
span.long_word で囲っている範囲は改行されることがない。
つまり、囲っていない部分で適当な位置を改行する。

.long_word{
  white-space: nowrap;
}

番外編：PCとスマホで表示を切り替える

br を display: none; で消した応用で、@media screen and (max-width: 600px) と (min-width: 600px) の両方に display:none; を付与するクラスを作って切り替える。

下記のコードは .pc をつけると PC画面の時だけ表示、.sp をつけるとスマホ表示の時だけ表示されるようになります。
今回は 画面幅600px で切り替えるように設定しています。

@media screen and (max-width: 600px){
  .pc{
    display: none;
  }
}
@media screen and (min-width: 600px){
  .sp{
    display: none;
  }
}

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

• 一度買えば、月額料金はなし
• 複数サイトで使用可能
• ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
• ブロックエディタの豊富な追加ブロックで投稿がリッチに
• 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
• 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)

SWELLをもっと詳しく知る