how - Ignorar<br> con CSS?
how to add before css (10)
Así es como lo hago:
br {
display: inline;
content: '' '';
clear:none;
}
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.
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;
}
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
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>
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;}
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;
}
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!
Si agregas el estilo
br{
display: none;
}
Entonces esto funcionará. Sin embargo, no estoy seguro si funcionará en versiones anteriores de IE.
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''
}
Simplemente puede convertirlo en un comentario ...
O puedes hacer esto:
br {
display: none;
}
Pero si no lo quieres, ¿por qué lo pones ahí?
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.