Tipografía
Utilidades para controlar cómo 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 salte de línea y truncar el texto desbordado con puntos suspensivos (…) si es necesario:
La palabra más larga en cualquiera de los diccionarios principales de la lengua inglesa 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...</p>Usa la utilidad text-ellipsis para truncar el texto desbordado con puntos suspensivos (…) si es necesario:
La palabra más larga en cualquiera de los diccionarios principales de la lengua inglesa 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...</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 diccionarios principales de la lengua inglesa 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...</p>Este es el comportamiento predeterminado del navegador.
Antepone a la utilidad text-overflow 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="text-ellipsis md:text-clip ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.