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 normally dentro de un elemento. Las líneas nuevas y los espacios se colapsarán:
¡Hola a todos! Ya 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!Ya 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. Las líneas nuevas y los espacios se colapsarán:
¡Hola a todos! Ya 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!Ya 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 preservar las líneas nuevas y los espacios dentro de un elemento. El texto no se ajustará:
¡Hola a todos! Ya 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!Ya 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 preservar las líneas nuevas pero no los espacios dentro de un elemento. El texto se ajustará normally:
¡Hola a todos! Ya 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!Ya 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 preservar las líneas nuevas y los espacios dentro de un elemento. El texto se ajustará normally:
¡Hola a todos! Ya 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!Ya 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 preservar las líneas nuevas 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! Ya 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!Ya 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>Prefija una utilidad white-space con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="whitespace-pre md:whitespace-normal ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.