span要素で改行させる方法をサンプルコード付きで紹介！

WEBサイトを制作している際、div要素やp要素では前後で改行が入りますが、span要素でも改行したいという場面が起こると思います。

この記事ではspan要素で改行させる方法をサンプルコード付きで解説いたします。

span要素で改行させる方法は簡単で、CSSの要素にdisplay: block;を適用すると改行されるようになります。

これはspan要素はインライン要素なので、テキストの流れを分断せずにそのまま一行になってしまうことが原因です。

この改善方法としてspan要素にdisplay: block;ブロックレベル要素を適用させることで、折返しされ改行ができるようになります。

下記のサンプルコードを参考にして下さい。

いかがだったでしょうか？

このようにインライン要素をブロック要素に変換させることで簡単に改行できるようになりました。

【5月31日まで】全カリキュラム無料で提供中！

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！