htmlで単語ごとに改行してレスポンシブにする

はじめに

今回は幅が狭くなったときに単語ごとに改行し、自然なレスポンシブデザインにする方法をご紹介します。

課題

上記のようにただテキストをならべると単語の途中で改行されてしまい、見栄えや可読性が悪いです。

やり方

spanタグで単語ごとに囲うとレスポンシブ対応ができます。

sample.html

 　　　　　　　 <div>
		<span>りんご</span>
		<span>すいか</span>
		<span>ぶどう</span>
	  </div>

さらに、spanタグに
display: inline-block;を付与します。

globals.css

 span {
      display: inline-block;
}

そうするとspanタグごとに綺麗に折り返しすることができます。

さらに改行すると

おわりに

いかがだったでしょうか。
簡単に綺麗な改行ができるので非常に使い勝手が良いです。
ぜひ試してみてください！