最終更新日: 2021年2月18日
span要素で改行させる方法をサンプルコード付きで紹介！
この記事では、span要素で改行させる方法を紹介します。span要素はインライン要素なので、それをブロック要素に変更させる必要があります。サンプルコードも用意してますので、皆さんも参考にしてください！
コンテンツ [表示]
span要素で改行させたい
WEBサイトを制作している際、div要素やp要素では前後で改行が入りますが、span要素でも改行したいという場面が起こると思います。
この記事ではspan要素で改行させる方法をサンプルコード付きで解説いたします。
span要素で改行させる方法
span要素で改行させる方法は簡単で、CSSの要素にdisplay: block;を適用すると改行されるようになります。
これはspan要素はインライン要素なので、テキストの流れを分断せずにそのまま一行になってしまうことが原因です。
この改善方法としてspan要素にdisplay: block;ブロックレベル要素を適用させることで、折返しされ改行ができるようになります。
下記のサンプルコードを参考にして下さい。
まとめ
いかがだったでしょうか？
このようにインライン要素をブロック要素に変換させることで簡単に改行できるようになりました。
