spanタグとbrタグによる改行

どうも、くまだです。

テキストの改行方法としてbrタグとspanタグと2つの方法があります。

spanタグとbrタグによる改行

改行するためのタグはbrタグ。こちらはよく使うと思いますが、spanタグで改行することもできます。

<p>テキストテキストテキストテキストテキストテキストテここで改行<span>キストテキストテキストテキスト</span></p>

span {
  display: inline-block;
}

spanタグにはdisplay: inline-block;を指定します。実際に改行するときは下のような感じ。

brタグは最初から改行されますが、spanタグで括った場合は例えば画面幅が狭くなったときに、spanタグで囲まれた部分だけまとめて改行されます。

例えばテキストが中央寄せになっていた場合、brタグだと画面幅が狭くなったときに変な位置で改行されます。

テキストの内容によっては、変な位置で改行されたくない、という場合spanタグでやってもいいかもしれません。brタグでやる場合、例えば画面幅が狭くなったらbrタグをdisplay: none;にしてbrタグを削除する方法があります。

p {
  text-align: left;
}

br {
  display: none;
}


@media (min-width: 768px) {
  p {
    text-align: center;
  }
  
  br {
    display: block;
  }
  
}

個人的には、やっぱり改行はbrタグを使うほうがいいのかなと思っています（改行するためのタグだし笑

クライアント様によっては、何かの理由があってこのテキストは変な位置で改行させたくない、という場合はspanタグを使ってもいいかもしれません。ただ、ぱっと見そのspanタグが改行するために挿入されたものなのか、そうでないのかは判別しないので、個人的にはあまり好きではないです。

こういうやり方もある、というのだけ頭の片隅に置いておきます。

ここまで読んでくださりありがとうございました。