Tipografía
Utilidades para controlar la propiedad white-space de un elemento.
| Clase | Estilos |
|---|---|
whitespace-normal | white-space: normal; |
whitespace-nowrap | white-space: nowrap; |
whitespace-pre | white-space: pre; |
whitespace-pre-line | white-space: pre-line; |
whitespace-pre-wrap | white-space: pre-wrap; |
whitespace-break-spaces | white-space: break-spaces; |
Usa la utilidad whitespace-normal para hacer que el texto se ajuste normalmente dentro de un elemento. Los saltos de línea y los espacios se colapsarán:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="whitespace-normal">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Usa la utilidad whitespace-nowrap para evitar que el texto se ajuste dentro de un elemento. Los saltos de línea y los espacios se colapsarán:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="overflow-auto whitespace-nowrap">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Usa la utilidad whitespace-pre para conservar los saltos de línea y los espacios dentro de un elemento. El texto no se ajustará:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="overflow-auto whitespace-pre">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Usa la utilidad whitespace-pre-line para conservar los saltos de línea pero no los espacios dentro de un elemento. El texto se ajustará normalmente:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="whitespace-pre-line">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Usa la utilidad whitespace-pre-wrap para conservar los saltos de línea y los espacios dentro de un elemento. El texto se ajustará normalmente:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="whitespace-pre-wrap">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Usa la utilidad whitespace-break-spaces para conservar los saltos de línea y los espacios dentro de un elemento. El espacio en blanco al final de las líneas no colgará, sino que se ajustará a la siguiente línea:
¡Hola a todos! Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre. Nunca lo sabrás.
<p class="whitespace-break-spaces">¡Hola a todos!Casi es 2022 y todavía no sabemos si hay extraterrestres viviendo entre nosotros, ¿o sí? Tal vez la persona que escribe esto sea un extraterrestre.Nunca lo sabrás.</p>Antepone a la utilidad white-space el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.