Ignorare <br> con CSS?

Sto lavorando su un sito che ha delle interruzioni di riga inserite come <br>in alcune intestazioni. Supponendo che non riesca a modificare il codice HTML sorgente, esiste un modo con i CSS per ignorare queste interruzioni?

Sto ottimizzando il sito da dispositivi mobili, quindi non desidero utilizzare JavaScript.

Con css, puoi "nascondere" i tag br e non avranno effetto:

br {
    display: none;
}

Se vuoi nasconderne solo alcuni all'interno di un tipo di intestazione specifico, rendi il tuo CSS più specifico.

h3 br {
    display: none;
}

Nota: questa soluzione funziona solo per i browser Webkit, che applicano erroneamente pseudo-elementi ai tag a chiusura automatica.

In aggiunta alle risposte precedenti, vale la pena notare che in alcuni casi è necessario inserire uno spazio invece di ignorare semplicemente <br>:

Ad esempio, le risposte di cui sopra cambieranno

Monday<br>05 August

per

Monday05 August

come avevo verificato mentre cercavo di formattare il mio calendario degli eventi settimanale. È preferibile inserire uno spazio dopo "lunedì". Questo può essere fatto facilmente inserendo quanto segue nel CSS:

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

Questo farà

Monday<br>05 August

Assomiglia a

Monday 05 August

È possibile modificare l' contentattributo br:afterper ', 'se si vuole separare da una virgola, o mettere tutto quello che vuoi all'interno ' 'per renderlo il delimitatore! A proposito

Monday, 05 August

sembra pulito ;-)

Vedi qui per un riferimento.

Come nelle risposte precedenti, se vuoi renderlo specifico per tag, puoi farlo. Ad esempio, se vuoi che questa proprietà funzioni per il tag <h3>, aggiungi semplicemente uno h3prima bre br:after, ad esempio.

Funziona più generalmente per uno pseudo-tag.

Se aggiungi lo stile

br{
    display: none;
}

Allora funzionerà. Non sono sicuro se funzionerà nelle versioni precedenti di IE.

Ecco come lo faccio:

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

È possibile utilizzare spanelementi invece di brse si desidera che il metodo dello spazio bianco funzioni, poiché dipende da pseudo-elementi che sono "non definiti" per gli elementi sostituiti.

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

L'interruzione di riga si ottiene semplicemente impostando l'elemento span appropriato su display:block.

Utilizzando ID e / o classi nel markup HTML puoi facilmente indirizzare ogni singola o combinazione di elementi span tramite CSS o utilizzare selettori CSS come nth-child().

Quindi, ad esempio, puoi definire diversi punti di interruzione utilizzando le media query per un layout reattivo.

E puoi anche semplicemente aggiungere / rimuovere / attivare / disattivare le classi tramite Javascript (jQuery).

Il "vantaggio" di questo metodo è la sua robustezza: funziona in tutti i browser che supportano pseudo-elementi (vedi: Posso usare - Contenuti generati da CSS ).

In alternativa è anche possibile aggiungere un'interruzione di riga tramite pseudo-elementi:

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

DEMO

Per me sembra meglio così:

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>

Per questo puoi semplicemente fare così:

br{display: none;}

e se è all'interno di un tag PRE, puoi farlo e se vuoi che il tag PRE si comporti come un normale elemento di blocco, puoi usare questo CSS:

pre {white-space: normal;}

Oppure puoi seguire lo stile di Aneesh Karthik C come:

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

Penso che tu abbia capito

Secondo la tua domanda, per risolvere questo problema per Firefox e Opera utilizzando l' approccio C di Aneesh Karthik , devi aggiungere l'attributo "float" right ".

Controlla l' esempio qui. Questo CSS funziona in Firefox (26.0), Opera (12.15), Chrome (32.0.1700) e Safari (7.0)

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

Spero che questo risponda alla tua domanda !!

Anche se questa domanda sembra essere già stata risolta, la risposta accettata non ha risolto il problema per me su Firefox. Firefox (e forse IE, anche se non l'ho provato) salta gli spazi vuoti durante la lettura del contenuto del tag "content". Anche se capisco completamente perché Mozilla dovrebbe farlo, porta la sua parte di problemi. La soluzione più semplice che ho trovato è stata quella di utilizzare spazi non divisibili invece di quelli normali come mostrato di seguito.

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

Dai un'occhiata .

Sì, puoi ignorarlo <br>. Potrebbe essere necessario soprattutto in caso di design reattivo in cui è necessario rimuovere le interruzioni per i dispositivi mobili.

HTML

<h2>

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

</h2>

CSS per esempio mobile

/* Resize the browser window to check */

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

Dai un'occhiata a questo Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Puoi semplicemente convertirlo in un commento ..

Oppure puoi fare questo:

br {
display: none;
}

Ma se non lo vuoi perché lo metti lì?