Tipografía
Utilidades para controlar cómo se desborda el texto de un elemento.
| Clase | Estilos |
|---|---|
truncate | overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
Usa la utilidad truncate para evitar que el texto se ajuste y truncar el texto desbordante con puntos suspensivos (…) si es necesario:
La palabra más larga en cualquiera de los principales diccionarios del idioma inglés es pneumonoultramicroscopicsilicovolcanoconiosis, una palabra que se refiere a una enfermedad pulmonar contraída por la inhalación de partículas de sílice muy finas, específicamente de un volcán; médicamente, es lo mismo que la silicosis.
<p class="truncate">La palabra más larga en cualquiera de los principales...</p>Usa la utilidad text-ellipsis para truncar el texto desbordante con puntos suspensivos (…) si es necesario:
La palabra más larga en cualquiera de los principales diccionarios del idioma inglés es pneumonoultramicroscopicsilicovolcanoconiosis, una palabra que se refiere a una enfermedad pulmonar contraída por la inhalación de partículas de sílice muy finas, específicamente de un volcán; médicamente, es lo mismo que la silicosis.
<p class="overflow-hidden text-ellipsis">La palabra más larga en cualquiera de los principales...</p>Usa la utilidad text-clip para truncar el texto en el límite del área de contenido:
La palabra más larga en cualquiera de los principales diccionarios del idioma inglés es pneumonoultramicroscopicsilicovolcanoconiosis, una palabra que se refiere a una enfermedad pulmonar contraída por la inhalación de partículas de sílice muy finas, específicamente de un volcán; médicamente, es lo mismo que la silicosis.
<p class="overflow-hidden text-clip">La palabra más larga en cualquiera de los principales...</p>Este es el comportamiento predeterminado del navegador.
Prefija una utilidad text-overflow con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="text-ellipsis md:text-clip ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.