HTML の br タグを CSS だけで消す方法

HTML に br という要素がありますね。

The br element represents a line break.

ということで、改行を表すということになってます。

以前は <br /> が不要なら <br /> を入れなきゃいいじゃない
というだけの話だったんだけど、
最近これを有効にしたり無効にしたりと切り替えたくなることがあります。

例えばいわゆるレスポンシブデザインでサイトを組むときに
大きな画面なら表示範囲にゆとりがあるから改行を入れて広く使ってもいいけど
スマートフォンなどの画面でそれをやると一目に入る情報量が減っちゃうから
そのときだけ br をなかったことにしたいという具合に。

考えたこともやったこともなかったんだけど、
これ実に簡単な話でした。

要するに br に display: none; を指定するだけですね。
例えばこんな感じの HTML があったとして

<p class="greeting">こんにちは<br />頭ん中です。</p>

などとしておいて、CSS で

@media screen and (max-width: 480px) {
  .greeting br {
    display: none;
  }
}

とすれば、画面幅が 480px までの端末のときだけ br が無効になります。

br に display プロパティをつけるという発想がなかったんだけど
確かにこれなら表示 / 非表示を切り替えられる。

ところで、HTML というのは意味の構造を表すものであって
表示のために改行を使うのはけしからん、という話にもなってますね。

けれどもこのブログでは
いまのところ br で改行しています。

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

改行そのものがコンテンツの一部となる
詩や住所の場合にお使いなさい、とのことですから。

このブログはポエムであり、
万感の思いを込めて <br /> を入れているので
相応しい使い方だと思ってます。