CSSで改行コード<br>を無効化(消す)する方法

この記事は約1分で読めます。
広告

レスポンシブサイトを作る時とかに、PC表示の時は改行を入れたいけどスマホ表示の時は改行を無くしたい。
そんな時はCSSで<br>を消して対応しよう!!
例えば、こんなHTMLの時…

HTML

<p>
  ミラボー橋の下をセーヌは流れる<br>
  そして私たちの愛も<br>
  思い出さねばならないのか?<br><br>
  悲しみの後に必ず喜びが来たことを
</p>

上の「ミラボー橋」の一説の改行を消す場合――。
関係ない話ですが、セーヌ川ってシャンソンとかでよく出てくるけどそんなに綺麗なのかな?
今までパリへ行ったことがなかったので、コロナが明けたら見に行きたい。
セーヌ川を見るって理由でパリ旅行に行くの、ちょっとカッコイイよね。
そうでもないかな。
話がそれたけど、改行コード<br>を無効にする方法です!

CSS

// すべての<br>を消す
p br { display: none; }

// 一部の<br>を消す
p br:nth-of-type(1), p br:nth-of-type(2) { display: none; } 

こちらからは以上です!

エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて7年目になります。
エディタはAtomからVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました