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:
- Desenfocar una foto con CSS y otros efectos fotográficos
- Cambiar el color de los placeholder con CSS
- Enlaces largos y word-wrap
- Usar iconos de Font Awesome como placeholder en un formulario
Y no te pierdas el [Front] Snippet del día, ¡cada día uno diferente para inspirarte y probar!
Comentarios
4 respuestas a «Cómo crear un salto de línea con CSS»
|
Seria muy bueno tener un ejemplo para saber como aplicarlo
|
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!
|
Muchas gracias por responder. ahora lo veo y lo pondré en practica
|
Deberias hacer mas trabajos como esta… Muchas gracias, Un saludo