レスポンシブ時の改行位置をCSSで調整

2024.09.06 09:00
2024.09.06 10:41
レスポンシブ時の改行位置をCSSで調整

レスポンシブでサイトを組む際に手間なのが、改行の位置です。
PCなら改行し、スマホなら改行しない、といった具合に画面幅に合わせてbrを消したり出したりしなくてはいけませんでした。

でもspanを使う方法なら、画面幅に合わせる必要はなく、cssを一つ書けばいいという手軽さで実現できるようでした。ということでやってみます。

デモはこちら

画面が広い場合はなにもせず、小さくなったときだけ、改行が反映されます。
これは便利ですね。

では実際のコードです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .text span {
      display: inline-block;
    }
  </style>
  <title></title>
</head>
<body>
  <div class="text">
    <span>テキスト1をここに入れます。テキスト1をここに入れます。</span><span>テキスト2をここに入れます。</span><span>テキスト3をここに入れます。テキスト3をここに入れます。</span><span>テキスト4をここに入れます。テキスト4をここに入れます。</span>
  </div>
</body>
</html>

ポイントはセクションごとにspanで囲み、
css側でspanにinline-blockを当てるということです。
spanがブロックになるので、画面が狭まれば段落ちするという具合ですね。
便利でかつシンプルですね。

今回は以上です！