こんにちは！
アラフォーフリーランスのひでかずです
Web制作コーダーとして制作会社様などからWebサイトコーディング、WordPress構築のお仕事を受託しながら活動しています
突然ですが日々コーディングをしていて「このテキストは途中で改行されてほしくない」と思うことはありませんか？
レスポンシブでどんな画面幅でも改行されてほしくないことってよくありますよね？
そこで、先日こんなツイートをしました
brタグにクラスを付けてSPとPCでを display: none; で切り替えるようなことってよく使われてると思いますが、
このやり方の場合、設定したメディアクエリの画面幅以外では制御できないですよね
なので今回は別のやり方を紹介します！
※brタグを display: none; で切り替えるやり方が悪いわけではないです！（僕もよく使います）
使い分けるのがいいのかなと思います
結論： inline-block を活用！
結論は改行させたくないテキストを spanタグとかで囲んで、 inline-block にすればOKです！
こうすることで画面幅が広いときは１行で表示させつつも、画面幅が縮んでくるとspanタグで囲んだテキストがまとめて改行され、中途半端な位置で改行されなくなります。
また、画面幅が更に縮んでspanタグで囲んだ要素よりも小さくなるとspanタグ内で改行されるので親要素をはみ出したりすることがありません！
どうでしょう？めっちゃ使い勝手よくないですか？
See the Pen spanで改行制御 by ひでかず (@hidekazu-web) on CodePen.
まとめ：改行させたくないテキストをspanタグで囲んで inline-block！
なんでもかんでもこれで解決するわけではないですが、単語ごとに改行制御したいときはこのやり方、
SPとPCでパキッと改行位置を変えたいときはbrタグに display: none;
というふうに使い分けがいいかなと思います！
今後もコーディングに役立つ記事を書いていきたいと思います
