Eliminar BR con CSS

Toca artículo sencillo de código. Veamos cómo eliminar los saltos de linea BR de HTML con los estilos CSS.

Tutoriales HTML y CSS

El problema

Resulta que trabajando con un plugin de WordPress, en sus plantillas añaden saltos de linea BR en mucho de su código.

Te pones a buscar, y resulta que afecta a muchos ficheros que debes modificar y no sabes cómo irá afectando a tu página web.

La mayoría de plantillas potentes del mercado, permiten añadir código CSS en uno de sus apartados de configuración, y que si trabajas con él, no afecta a futuras actualizaciones de la plantilla.

Jugaremos con esta opción avanzada de las plantillas. Su apartado de añadir CSS o código a la web. Buscadla en vuestra plantilla. Si la encontráis, deberéis trabajar directamente con los CSS de la plantilla, con el problema que puede ser eliminado si actualizas plantilla o hay muchos cambios respecto a la plantilla hija que tengas.

La solución

Si tenemos código parecido a este:

<div class="caja-formulario">
Primer texto
<br />
Segund texto
<br />
Tercer texto
</div>

Lógicamente, los <br /> obligan a forzar el salto de linea. Pues con CSS podemos eliminar estos saltos de linea sin tener que modificar el código.

.caja-formulario br {
   display: none;
}

Con este código hacemos que en todos los objetos de la clase .caja-formulario, que contengan saltos de linea br, no se aplicará esos saltos de linea.

Podéis ver el ejemplo de cómo eliminar BR con código CSS en acción en nuestro CodePen

Más información