how - Ignorar<br> con CSS?

how to add before css

Question

Estoy trabajando en un sitio que tiene saltos de línea insertados en algunos de los encabezados. Asumiendo que no puedo editar el código HTML de origen, ¿hay alguna manera con CSS de ignorar estos saltos?

Estoy optimizando el sitio móvil, así que realmente no quiero usar JavaScript.

Answer 1

Así es como lo hago:

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

Answer 2

Con css, puedes "esconder" las etiquetas br y no tendrán efecto:

br {
display: none;
}

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

h3 br {
display: none;
}

Answer 3

Para eso, puedes hacer así:

br{display: none;}

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

pre {white-space: normal;}

O puedes seguir el estilo de Aneesh Karthik C como:

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

Creo que lo conseguiste

Answer 4

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>

Answer 5

Puede usar elementos span lugar de br si desea que funcione el método de espacio en blanco, ya que depende de pseudo-elementos 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;}

DEMO

El salto de línea se logra simplemente al configurar el elemento span apropiado para display:block .

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

Por lo que puede, por ejemplo, definir diferentes puntos de ruptura mediante el uso de consultas de medios para un diseño receptivo.

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

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

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

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

DEMO

Answer 6

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

Mira el example 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 tu pregunta!

Answer 7

Si agregas el estilo

br{
display: none;
}

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

Answer 8

Si bien esta pregunta parece que ya se ha resuelto, la respuesta aceptada no resolvió el problema para mí en Firefox. Firefox (y posiblemente IE, aunque no lo he probado) omita espacios en blanco mientras lee los contenidos de la etiqueta "content". 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 utilizar espacios no rompibles en lugar de los regulares, como se muestra a continuación.

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

Eche un vistazo .

Answer 9

Simplemente puede convertirlo en un comentario ...

O puedes hacer esto:

br {
display: none;
}

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

Answer 10

Nota: Esta solución solo funciona para los navegadores Webkit, que aplican pseudo-elementos incorrectamente a las etiquetas de cierre automático.

Como una adición a las respuestas anteriores, vale la pena señalar que en algunos casos se necesita insertar un espacio en lugar de simplemente ignorar <br> :

Por ejemplo, las respuestas anteriores girarán

Monday<br>05 August

a

Monday05 August

como lo había verificado mientras trataba de formatear mi calendario de eventos semanal. Es preferible 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

Puedes cambiar el atributo de content en br:after to '', '' si quieres separar por comas, o poner lo que quieras dentro '' '' para hacerlo el delimitador! Por cierto

Monday, 05 August

se ve bien ;-)

Vea here para una referencia.

Como en las respuestas anteriores, si desea hacerlo específico de la etiqueta, puede hacerlo. Al igual que si quiere que esta propiedad funcione para la etiqueta <h3> , simplemente agregue una h3 antes de br y br:after , por ejemplo.

Funciona generalmente para una pseudo-etiqueta.