¿Ignorar <br> con CSS?

Estoy trabajando en un sitio que tiene saltos de línea insertados como <br>en algunos de los títulos. Suponiendo que no puedo editar el HTML de origen, ¿hay alguna forma con CSS que pueda ignorar estos saltos?

Estoy optimizando el sitio para dispositivos móviles, por lo que realmente no quiero usar JavaScript.

Con CSS, puede "ocultar" las etiquetas br y no tendrán ningún efecto:

br {
    display: none;
}

Si solo desea ocultar algunos dentro de un tipo de encabezado específico, simplemente haga que su css sea más específico.

h3 br {
    display: none;
}

Nota: Esta solución solo funciona para navegadores Webkit, que aplican incorrectamente pseudoelementos a etiquetas de cierre automático.

Como apéndice a las respuestas anteriores, vale la pena señalar que en algunos casos es necesario insertar un espacio en lugar de simplemente ignorar <br>:

Por ejemplo, las respuestas anteriores se convertirán

Monday<br>05 August

a

Monday05 August

como había verificado mientras trataba de formatear mi calendario de eventos semanales. Se prefiere insertar un espacio después de "Lunes". Esto se puede hacer fácilmente insertando lo siguiente en el CSS:

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

Esto hará

Monday<br>05 August

parece

Monday 05 August

Puede cambiar el contentatributo br:aftera ', 'si desea separarlo por comas, o poner lo que quiera dentro ' 'para convertirlo en el delimitador. Por cierto

Monday, 05 August

luce ordenado ;-)

Consulte aquí para obtener una referencia.

Como en las respuestas anteriores, si desea que sea específico de la etiqueta, puede hacerlo. Como si desea que esta propiedad funcione para la etiqueta <h3>, simplemente agregue h3cada uno antes bry br:after, por ejemplo.

Funciona más generalmente para una pseudoetiqueta.

Si agrega en el estilo

br{
    display: none;
}

Entonces esto funcionará. Sin embargo, no estoy seguro de si funcionará en versiones anteriores de IE.

Así es como lo hago:

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

Puede usar spanelementos en lugar de brsi desea que funcione el método de espacio en blanco, ya que depende de pseudoelementos que "no están definidos" para los elementos reemplazados.

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

MANIFESTACIÓN

El salto de línea se logra simplemente configurando el elemento de tramo apropiado en display:block.

Al usar ID y / o clases en su marcado HTML, puede apuntar fácilmente a cada uno o combinación de elementos span mediante CSS o usar selectores CSS como nth-child().

Entonces, por ejemplo, puede definir diferentes puntos de interrupción utilizando consultas de medios para un diseño receptivo.

Y también puede simplemente agregar / eliminar / alternar clases mediante Javascript (jQuery).

La "ventaja" de este método es su solidez: funciona en todos los navegadores que admiten pseudoelementos (consulte: ¿Puedo usar - Contenido generado con CSS ).

Como alternativa, también es posible agregar un salto de línea a través de pseudoelementos:

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

MANIFESTACIÓN

Para mí se ve mejor así:

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>

Para eso, puedes hacer lo siguiente:

br{display: none;}

y si está dentro de alguna etiqueta PRE, entonces puede y si desea que la etiqueta PRE se comporte como un elemento de bloque normal, puede usar este CSS:

pre {white-space: normal;}

O puede seguir el estilo de Aneesh Karthik C como:

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

Creo que lo conseguiste

Según su pregunta, para resolver este problema para Firefox y Opera usando el enfoque Aneesh Karthik C , debe agregar el atributo "flotar" derecho ".

Mira el ejemplo aquí. Este CSS funciona en Firefox (26.0), Opera (12.15), Chrome (32.0.1700) y Safari (7.0)

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

¡Espero que esto responda a tu pregunta!

Si bien esta pregunta parece que ya se ha resuelto, la respuesta aceptada no me resolvió el problema en Firefox. Firefox (y posiblemente IE, aunque no lo he probado) omite los espacios en blanco mientras lee el contenido de la etiqueta "contenido". Si bien entiendo completamente por qué Mozilla haría eso, trae su parte de problemas. La solución más fácil que encontré fue usar espacios irrompibles en lugar de los regulares, como se muestra a continuación.

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

Echa un vistazo .

Sí, puedes ignorar esto <br>. Es posible que lo necesite especialmente en el caso de un diseño receptivo en el que necesite eliminar las interrupciones para los dispositivos móviles.

HTML

<h2>

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

</h2>

CSS para ejemplo móvil

/* Resize the browser window to check */

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

Consulte este Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Simplemente puede convertirlo en un comentario.

O puedes hacer esto:

br {
display: none;
}

Pero si no lo quieres, ¿por qué lo pones ahí?