【CSS】brタグを無効にする方法

brタグを無効にしたいケースは意外と多いですよね。例えば、意図しない改行が発生してレイアウトが崩れたり、レスポンシブ対応で改行を制御したい場合など。CSSを使えば、簡単にbrタグの影響をなくすことができます。

今回は、brタグを無効にする方法をいくつか紹介します。

display: none; を使う

brタグを完全に無効化する最もシンプルな方法は、display: none; を適用することです。

br {
  display: none;
}

このCSSを適用すると、ページ内のすべてのbrタグが非表示になり、改行が発生しなくなります。特定の要素内のみ適用したい場合は、親要素を指定することもできます。

.parent br {
  display: none;
}

この場合、.parent クラスを持つ要素内でのみbrタグが無効になります。

brタグを単に消すのではなく、スペースに置き換えたい場合は、以下の方法が使えます。

br::before {
  content: " ";
}
br {
  display: none;
}

こうすることで、改行の代わりに少しスペースを持たせることができます。テキストの流れを崩さず、見た目を調整したいときに便利ですね。

親要素に white-space: nowrap; を適用すると、brタグを含むすべての改行が無効になります。

.parent {
  white-space: nowrap;
}

このスタイルを .parent クラスに適用すると、子要素のbrタグがあっても改行が無視され、横に続けて表示されるようになります。

CSSだけではなく、JavaScriptを使ってページ内のbrタグを完全に削除する方法もあります。

document.querySelectorAll("br").forEach(br => br.remove());

このスクリプトを実行すると、brタグがすべて削除され、改行が完全になくなります。動的にコンテンツが生成される場合や、CSSだけでの制御が難しい場合に便利です。