html - tiene - detener la rotura de etiquetas BR con CSS

salto de linea html

Question

¿Hay una manera de detener el rompimiento de una etiqueta <br> usando solo CSS?

Intenté br{display:none} whick funciona, pero también se libra del espacio entre las dos palabras, que necesito conservar.

Esto es solo para webkit (iPhone), por lo que cualquier extravagancia de CSS3 está bien.

No puedo editar el contenido del CMS, así que simplemente eliminar la etiqueta no es una opción para mí.

¡Gracias!

Answer 1

¿Por qué no usar:

br {
    content: " "; /* Remove break */
    margin-right: 6px; /* Set space between text blocks */
}

Answer 2

Bien, bien, después de jugar un poco, he encontrado una solución que compartiré contigo. Parece que es posible controlar la etiqueta <br> completamente con CSS

button br{content:" ";border:1px solid #fff;background:red;padding:50px;}/* whatever you like */

button br:after{content:" ";}

El HTML -

<button>the annoying<br/>tag is gone leaving a controlable space</button>

No estoy seguro de cómo es el navegador cruzado, pero está funcionando en Webkit y iPhone, que por ahora es todo lo que necesito.

Answer 3

Como lo mencionó boz en los comentarios sobre el OP, esto no va a ser posible. O bien <br/> es visible (en cuyo caso, es un retorno de carro) o no, en cuyo caso no tiene control sobre él a través de CSS.

El problema fundamental aquí es que está utilizando la herramienta incorrecta para el trabajo: desea cambiar la estructura del DOM, que es el dominio de Javascript (al menos en el cliente).

Una alternativa que no requiere Javascript o un cambio en el CMS sería configurar un servidor para enviar las solicitudes y eliminar las etiquetas <br/> medida que pasa por el documento, pero parece una exageración.

Answer 4

Esto funcionó para mí:

br {content: ""}
br:after {content: "/00a0"}

Answer 5

Siguiendo las respuestas aquí, esto evita que la etiqueta <br> rompa tanto en Chrome como en IE:

br {
    content: " ";
    display: none;
}

Answer 6

Ver ¿ Ignorar <br> con CSS? . Una de las soluciones es esta (que es la mejor en mi opinión)

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

Answer 7

content: " ";
padding-right: 5px; // ok, same as margin-right