🪧

【wbrタグ】HTMLとCSSでレスポンシブに改行する

2023/02/05に公開

CSS

HTML

コーディング

tech

PCだと1文改行なしで、スマホでは区切りのいいところ改行したい、という時よくあるかとおもいます。
そういうときに で実装しがちですが、他にも2パターンあるので記事にまとめます。

具体的には以下の３パターンになります。（一番上が ）

brタグとメディアクエリを使う…

おそらく一番定番？の実装方法。

<style>
  @media (min-width: 572px) {
    .sp-only {
        display: none;
    }
  }
</style>
<p>
  こちらは長めのテキストの文章になります。<br class="sp-only" />スマホになるとここで改行します。
</p>

ただ、この方法だとメディアクエリの設定が結構面倒です。
文字サイズにあわせてメディアクエリを追加するなども場合によっては必要だったり…。

なので、最近は他の2パターンの方法で改行を調整することが多いです。

wbrタグを使う

最近知った方法なんですが、とword-break: keep-all;で改行することができます。

コードとしては、word-break: keep-all;で囲んだ文章に、区切りのいいタイミングでを入れるようなかたち。

<style>
  .break-keep {
    word-break: keep-all;
  }
</style>
<p class="break-keep">
  こちらは長めのテキストの文章になります。<wbr />スマホになるとここで改行します。
</p>

この書き方だと文章の長さにあわせて、いい感じに改行してくれます。

上がbrタグ使用／下がwbrタグ使用

inline-blockを使う

もう1つのパターンは、改行したいフレーズごとにで囲む手法。
こちらも上述したwbrタグの手法と同様に、文章の長さにあわせていい感じに改行してくれます。

<style>
  .inline-block {
    display: inline-block;
  }
</style>
<p>
  <span class="inline-block">こちらは長めのテキストの文章になります。</span
  ><span class="inline-block">スマホになるとここで改行します。</span>
</p>

最後に

ということで、レスポンシブに改行する3パターンの紹介でした。
個人的にはwbrタグの手法が、改行がいい感じになりつつ、コードもシンプルに収まるのでいいかなーという所感です。

他にもいい感じに改行する手法があれば、ディスカッションで教えていただけると幸いです。
それでは。👋

参考

brタグとメディアクエリを使う…

wbrタグを使う

inline-blockを使う

最後に

Discussion