CSSで<br>を無視しますか？

<br>一部の見出しのように改行が挿入されているサイトで作業しています。ソースHTMLを編集できない場合、CSSでこれらの改行を無視できる方法はありますか？

私はモバイルでサイトを最適化しているので、JavaScriptを使いたくありません。

cssを使用すると、brタグを「隠す」ことができ、それらは効果がありません。

br {
    display: none;
}

特定の見出しタイプ内の一部のみを非表示にする場合は、CSSをより具体的にします。

h3 br {
    display: none;
}

注：このソリューションは、疑似要素を自己終了タグに誤って適用するWebkitブラウザーでのみ機能します。

上記の回答の補足として、単に無視するのではなくスペースを挿入する必要がある場合があることに注意して<br>ください。

たとえば、上記の答えは変わります

Monday<br>05 August

に

Monday05 August

毎週のイベントカレンダーをフォーマットしようとしたときに確認したので。「月曜日」の後にスペースを挿入することをお勧めします。これは、CSSに以下を挿入することで簡単に実行できます。

br  {
    content: ' '
}
br:after {
    content: ' '
}

これは

Monday<br>05 August

のように見える

Monday 05 August

カンマで区切る場合は、content属性をに変更br:afterする', 'か、必要なものを入れ' 'て区切り文字にすることができます。ところで

Monday, 05 August

きちんと見えます;-)

参考までにこちらをご覧ください。

上記の回答のように、タグ固有にしたい場合はできます。このプロパティをtag <h3>で機能させる場合と同様に、たとえばh3before brとを追加するだけbr:afterです。

疑似タグに対して最も一般的に機能します。

スタイルに追加すると

br{
    display: none;
}

その後、これは機能します。古いバージョンのIEで動作するかどうかはわかりません。

これが私のやり方です：

br { 
    display: inline;
    content: ' ';
    clear:none;
}

置換された要素に対して「定義されていない」疑似要素に依存するため、空白メソッドを機能さspanせるbr場合は、の代わりに要素を使用できます。

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

デモ

改行は、適切なスパン要素をに設定することで簡単に実現できdisplay:blockます。

HTMLマークアップでIDやクラスを使用することで、CSSでスパン要素のすべてまたは組み合わせを簡単にターゲットにしたり、などのCSSセレクターを使用したりできますnth-child()。

たとえば、レスポンシブレイアウトのメディアクエリを使用して、さまざまなブレークポイントを定義できます。

また、Javascript（jQuery）でクラスを追加/削除/トグルすることもできます。

この方法の「利点」はその堅牢性です-疑似要素をサポートするすべてのブラウザーで機能します（参照：使用できる-CSSで生成されたコンテンツ）。

別の方法として、疑似要素を介して改行を追加することもできます。

span.break:before {  
    content: "\A";
    white-space: pre;
}

デモ

私にとってはこのように見えます：

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

そのためには、次のようにします。

br{display: none;}

そして、それがいくつかのPREタグの内部にある場合、それが可能で、PREタグを通常のブロック要素のように動作させたい場合は、次のCSSを使用できます。

pre {white-space: normal;}

または、次の ようなAneesh Karthik Cのスタイルに従うこともできます。

br  {content: ' '}
br:after {content: ' '}

わかったと思います

あなたの質問によると、FirefoxとOperaでAneesh Karthik Cアプローチを使用してこの問題を解決するには、 "float" right "属性を追加する必要があります。

ここで例を確認してください。このCSSは、Firefox（26.0）、Opera（12.15）、Chrome（32.0.1700）、Safari（7.0）で動作します。

br {
   content: " ";  
   float:right; 
}

これがあなたの質問に答えてくれることを願っています!!

この質問はすでに解決されているようですが、受け入れられた回答ではFirefoxでの問題は解決されませんでした。Firefox（およびおそらくIEは試していませんが）は、「コンテンツ」タグのコンテンツを読み取るときに空白をスキップします。なぜMozillaがそうするのか私は完全に理解していますが、問題の共有をもたらします。私が見つけた最も簡単な回避策は、以下に示すように、通常のスペースの代わりに分割できないスペースを使用することでした。

.noLineBreaks br:before{
content: '\a0'
}

見てください。

はい、これは無視できます <br>。これは、特にモバイルデバイスのブレークを削除する必要があるレスポンシブデザインの場合に必要になることがあります。

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

モバイル用CSSの例

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

このCodepenをチェックしてください：https：//codepen.io/fluidbrush/pen/pojGQyM

コメントに変換するだけです。

またはこれを行うことができます：

br {
display: none;
}

しかし、あなたがそれを望まないなら、なぜそこに置くのですか？