<br> mit CSS ignorieren?

Ich arbeite an einer Site, in die Zeilenumbrüche eingefügt sind <br> in einigen Überschriften . Angenommen, ich kann den Quell-HTML-Code nicht bearbeiten. Gibt es eine Möglichkeit, diese Unterbrechungen mit CSS zu ignorieren?

Ich bin mobil und optimiere die Website, sodass ich JavaScript nicht wirklich verwenden möchte.

Mit CSS können Sie die br-Tags "ausblenden" und sie haben keine Auswirkung:

br {
    display: none;
}

Wenn Sie nur einige innerhalb eines bestimmten Überschriftentyps ausblenden möchten, machen Sie Ihr CSS einfach spezifischer.

h3 br {
    display: none;
}

Hinweis: Diese Lösung funktioniert nur für Webkit-Browser, die Pseudoelemente fälschlicherweise auf selbstschließende Tags anwenden.

Als Ergänzung zu den obigen Antworten ist anzumerken, dass in einigen Fällen ein Leerzeichen eingefügt werden muss, anstatt nur zu ignorieren <br>:

Zum Beispiel werden sich die obigen Antworten drehen

Monday<br>05 August

zu

Monday05 August

wie ich überprüft hatte, während ich versuchte, meinen wöchentlichen Veranstaltungskalender zu formatieren. Ein Leerzeichen nach "Montag" wird bevorzugt eingefügt. Dies kann einfach durch Einfügen von Folgendem in das CSS erfolgen:

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

Das wird machen

Monday<br>05 August

aussehen wie

Monday 05 August

Sie können das contentAttribut in ändern br:after, ', 'wenn Sie durch Kommas trennen möchten, oder alles, was Sie möchten, in ' 'das Trennzeichen einfügen! Apropos

Monday, 05 August

sieht ordentlich aus ;-)

Siehe hier für eine Referenz.

Wie in den obigen Antworten können Sie dies tun, wenn Sie es tag-spezifisch machen möchten. Wenn Sie möchten, dass diese Eigenschaft für ein Tag funktioniert <h3>, fügen Sie einfach h3jeweils ein vor brund hinzu br:after.

Es funktioniert am allgemeinsten für ein Pseudo-Tag.

Wenn Sie im Stil hinzufügen

br{
    display: none;
}

Dann wird das funktionieren. Ich bin mir nicht sicher, ob es in älteren IE-Versionen funktioniert.

So mache ich es:

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

Sie können spanElemente anstelle von verwenden, brwenn die Leerraummethode funktionieren soll, da dies von Pseudoelementen abhängt, die für ersetzte Elemente "nicht definiert" sind.

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;}

DEMO

Der Zeilenumbruch wird einfach durch Einstellen des entsprechenden Span-Elements auf erreicht display:block.

Durch die Verwendung von IDs und / oder Klassen in Ihrem HTML-Markup können Sie problemlos jedes einzelne oder jede Kombination von Span-Elementen per CSS ausrichten oder CSS-Selektoren wie verwenden nth-child() .

Sie können also z. B. verschiedene Haltepunkte definieren, indem Sie Medienabfragen für ein ansprechendes Layout verwenden.

Sie können Klassen auch einfach mit Javascript (jQuery) hinzufügen / entfernen / umschalten.

Der "Vorteil" dieser Methode ist ihre Robustheit - funktioniert in jedem Browser, der Pseudoelemente unterstützt (siehe: Kann ich verwenden - CSS-generierter Inhalt ).

Alternativ ist es auch möglich, einen Zeilenumbruch über Pseudoelemente hinzuzufügen:

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

DEMO

Für mich sieht das besser aus:

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>

Dafür können Sie einfach so vorgehen:

br{display: none;}

und wenn es sich in einem PRE-Tag befindet, können Sie und wenn Sie möchten, dass sich das PRE-Tag wie ein reguläres Blockelement verhält, können Sie dieses CSS verwenden:

pre {white-space: normal;}

Oder Sie können dem Stil von Aneesh Karthik C folgen wie:

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

Ich denke du hast es verstanden

Um dieses Problem für Firefox und Opera mithilfe des Aneesh Karthik C- Ansatzes zu lösen, müssen Sie gemäß Ihrer Frage das Attribut "float" right "hinzufügen.

Überprüfen Sie das Beispiel hier. Dieses CSS funktioniert in Firefox (26.0), Opera (12.15), Chrome (32.0.1700) und Safari (7.0).

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

Ich hoffe das wird deine Frage beantworten !!

Obwohl diese Frage bereits gelöst zu sein scheint, hat die akzeptierte Antwort das Problem für mich in Firefox nicht gelöst. Firefox (und möglicherweise IE, obwohl ich es nicht ausprobiert habe) überspringt Leerzeichen, während der Inhalt des Tags "content" gelesen wird. Ich verstehe zwar vollkommen, warum Mozilla das tun würde, aber es bringt einige Probleme mit sich. Die einfachste Problemumgehung, die ich gefunden habe, bestand darin, nicht unterbrechbare Leerzeichen anstelle von regulären Leerzeichen zu verwenden, wie unten gezeigt.

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

Schau mal rein .

Ja, das können Sie ignorieren <br>. Dies ist möglicherweise erforderlich, insbesondere bei reaktionsschnellem Design, bei dem Sie Pausen für mobile Geräte entfernen müssen.

HTML

<h2>

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

</h2>

CSS für mobile Beispiele

/* Resize the browser window to check */

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

Schauen Sie sich diesen Codepen an:
https://codepen.io/fluidbrush/pen/pojGQyM

Sie können es einfach in einen Kommentar umwandeln.

Oder Sie können dies tun:

br {
display: none;
}

Aber wenn du es nicht willst, warum legst du das dort hin?