テキストをスマホの時だけ任意で改行する方法
方法は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)
