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

PCだと1文改行なしで、スマホでは区切りのいいところ改行したい、という時よくあるかとおもいます。 そういうときに<br class="sp-only" />で実装しがちですが、他にも2パターンあるので記事にまとめます。 具体的には以下の３パターンになります。（一番上が<br class="sp-only" />） brタグとメディアクエリを使う… おそらく一番定番？の実装方法。 <style> @media (min-width: 572px) { .sp-only { display: none; } } </style> <p> こちらは長めのテキストの文章になります。<br class="sp-only" />スマホになるとここで改行します。 </p> ただ、この方法だとメディアクエリの設定が結構面倒です。 文字サイズにあわせてメディアクエリを追加するなども場合によっては必要だったり