htmlでｂｒを使用した文章をリサイズしたときに改行をなくしたい

Question

htmlでｂｒを使用した箇所をリサイズしたときに改行をなくしたいです。
cssで調整する方法があれば教えていただけますでしょうか。

html

<div class="top_text"><h2>あいはら歯科医院はおかげさまで開業○○年。</h2><span>患者さまの目線に立ち、基本に忠実な診療を心がけて参りました。<br>これからも●●で患者さまの歯の健康を見守り続けます。</span></div>

CSS

@media (min-width:768px) and (max-width: 1040px) {
}
コード

cssで以上のように768px以上1024px以下の時にhtmlで記載したbrの箇所の改行をなくしたいです。
よろしくお願いします。

Comments

[m.ts10806]

<br>じゃないとダメですか？

[Yuriplllll]

brじゃなくても大丈夫です。ほかにいい方法があればおしえていただけると嬉しいです。」

[kyoya0819]

なぜ改行を消したいのですか？

[m.ts10806]

>ほかにいい方法があれば

既にコメントでやり取りしている通りです。結構多様なやり方が可能ではあります。

Answer 1

brがマストなのでしょうか？段落構造にしてはいかがですか？

Comments

[yambejp]

<style>
.top_text p{margin:0px;}
@media (min-width:768px) and (max-width: 1040px) {
.top_text p{display:inline}
}
</style>
<div class="top_text">
<h2>あいはら歯科医院はおかげさまで開業○○年。</h2>
<p>患者さまの目線に立ち、基本に忠実な診療を心がけて参りました。</p>
<p>これからも●●で患者さまの歯の健康を見守り続けます。</p>
</div>

[Yuriplllll]

ありがとうございます。
cssで修正することばかり考えていましたがhtmlでもできるんですね！
まだまだ勉強不足なのを痛感しました。
また質問があった際には宜しくお願いします。

[kyoya0819]

というよりHTML構成を見直したのちに、CSSで要素のinlineとblockを切り替えているのだと思います。

Answer 2

display:none;

一応、「なくなる」けど、
かなり悪手な気がする。

Comments

[kyoya0819]

span等でそれぞれ括ってblockやらinline系に切り替えるのが妥当な気がします。

[m.ts10806]

brじゃなきゃいけないかどうかですね(別途確認中)

以下、誇大解釈
そもそも文章いれる人が改行させたくて入力したとしたら勝手に無効にしてはダメな気もします。

[Yuriplllll]

ありがとうございます。inlineやblockをもう少し勉強してみます。
いろいろなやり方があるのですね！
ご指摘ありがとうございました。

[m.ts10806]

はい。何が適切かは結局「要件次第」ですし、場合により構造や仕様から見直すこともあります。