CSSでbrタグを無効化する（消す）方法。改行で半角スペースが入る問題にも対応

レスポンシブでホームページを作ることが常識となった今、スマホ表示の時にbrタグを削除した方が都合がいい場面がちょくちょく出てくると思います。

ググって調べてみると[display: none;]で消す方法が検索上位からずらずらっと出てくるのですが、このやり方だと半角スペースが入ってしまう問題が出てきます（なぜどの記事もその問題に触れていないのか不思議なのですが…）。

そこでこの記事では、brタグの次に来る文字の前に半角スペースが出る原因と回避策について紹介します。

CSSでbrタグを無効化する（消す）方法

[display: none;]で消すと一見上手くいくのですが、brタグの次に来る文字の前に半角スペースが出てくることがあります。

br {display: none;}

このスペースができる原因はソースコードの改行です。通常、HTMLはコードを読みやすくするため、brタグで改行を入れることが一般的です。

このスペースができる原因は改行。＜br＞
通常、HTMLはコードを読みやすくするため、＜br＞
brタグで改行を入れることが一般的です。

つまり、改行を入れなければこの問題をとりあえずは回避できます。

このスペースができる原因は改行。＜br＞通常、HTMLはコードを読みやすくするため、＜br＞brタグで改行を入れることが一般的です。

ただ、これだとソースは見にくいですし、私のようにDreamweaverの自動整形を使ってると、結局また改行入れられてしまうため実用的ではありません。そのため、別の方法を考えました。

CSSの役割的に正しい使い方なのか？…と聞かれると若干微妙な気もしますが（汗）、疑似要素を使って幅を詰めると綺麗に収まります。

br {
　content: '';
}
br::after {
　margin-right: -0.333rem;
　content: '';
}

[display: none;]で半角スペースが入ってしまい、途方に暮れている方はお試しください。