Cómo crear un salto de línea con CSS

Una solución rápida si necesitas forzar un salto de línea pero modificando exclusivamente el CSS, para controlarlo por ejemplo con media queries.

por

esther

Hoy te dejo un truco de esos que me gustan… corto, rápido y práctico

Para crear un salto de línea con CSS, sin utilizar HTML, podemos hacerlo mediante los selectores de CSS3 after o before.

span.phone::before { content: '\A'; white-space: pre;}

Esto es muy práctico especialmente en la generación de estilos para responsive design, ya que muchas veces queremos, para determinadas resoluciones o tamaños de pantalla, crear un salto de línea y dividir cierto contenido de forma que el diseño se ajuste mejor.

Por el contrario, podemos hacer justo lo contrario también con CSS, ocultando etiquetas <br> de salto de línea para determinados tamaños de pantalla o dispositivos.

Simplemente con:

br { display: none; }

Otros trucos de CSS que te pueden interesar:

Y no te pierdas el [Front] Snippet del día, ¡cada día uno diferente para inspirarte y probar!

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA

Artículos relacionados

,

Comentarios

4 respuestas a «Cómo crear un salto de línea con CSS»

  1. Avatar de Edwin Galeano
    Edwin Galeano

    |

    Seria muy bueno tener un ejemplo para saber como aplicarlo

    1. Avatar de esther
      esther

      |

      Hola Edwin!
      Pues un ejemplo sencillo sería el mismo que hace referencia el artículo. Si yo tengo por ejemplo en la cabecera de mi web una franja donde indico mis datos de contacto «email@email.com · Facebook | Twitter | Linkedin · Tel.12345678» y quiero que en dispositivos móviles se produzca un salto de línea entre las redes sociales y el teléfono, puedo añadir una etiqueta

      "Tel. 12345678"

      y en el CSS una media query (para que afecte sólo a pantallas pequeñas) y añadir el estilo indicado: «span.phone::before { content: ‘\A’; white-space: pre;}»

      De esta forma, forzaremos el salto de línea justo antes de la etiqueta «phone».

      Espero haberte aclarado las dudas y que el ejemplo te haya servido.
      Saludos!

      1. Avatar de Edwin Galeano
        Edwin Galeano

        |

        Muchas gracias por responder. ahora lo veo y lo pondré en practica

  2. Avatar de salto de linea post wordpress
    salto de linea post wordpress

    |

    Deberias hacer mas trabajos como esta… Muchas gracias, Un saludo