Tipografía
Utilidades para controlar cómo se ajusta el texto dentro de un elemento.
| Clase | Estilos |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
Usa la utilidad text-wrap para ajustar el texto desbordado en múltiples líneas en puntos lógicos del texto:
Los neoyorquinos se enfrentan al frío invernal con menos calor este año, ya que el puesto de sopa más venerado de la ciudad cerró inesperadamente sus puertas, tras una serie de acontecimientos que han dejado a la comunidad desconcertada.
<article class="text-wrap"> <h3>Cierra un querido puesto de sopa en Manhattan</h3> <p>Los neoyorquinos se enfrentan al frío...</p></article>Usa la utilidad text-nowrap para evitar que el texto salte de línea, permitiendo que se desborde si es necesario:
Los neoyorquinos se enfrentan al frío invernal con menos calor este año, ya que el puesto de sopa más venerado de la ciudad cerró inesperadamente sus puertas, tras una serie de acontecimientos que han dejado a la comunidad desconcertada.
<article class="text-nowrap"> <h3>Cierra un querido puesto de sopa en Manhattan</h3> <p>Los neoyorquinos se enfrentan al frío...</p></article>Usa la utilidad text-balance para distribuir el texto de manera uniforme en cada línea:
Los neoyorquinos se enfrentan al frío invernal con menos calor este año, ya que el puesto de sopa más venerado de la ciudad cerró inesperadamente sus puertas, tras una serie de acontecimientos que han dejado a la comunidad desconcertada.
<article> <h3 class="text-balance">Cierra un querido puesto de sopa en Manhattan</h3> <p>Los neoyorquinos se enfrentan al frío...</p></article>Por razones de rendimiento, los navegadores limitan el equilibrio de texto a bloques de aproximadamente 6 líneas o menos, lo que lo hace más adecuado para los encabezados.
Usa la utilidad text-pretty para priorizar un mejor ajuste y diseño del texto a expensas de la velocidad. El comportamiento varía según el navegador, pero a menudo incluye estrategias como evitar palabras huérfanas (una sola palabra en su propia línea) al final de un bloque de texto:
Los neoyorquinos se enfrentan al frío invernal con menos calor este año, ya que el puesto de sopa más venerado de la ciudad cerró inesperadamente sus puertas, tras una serie de acontecimientos que han dejado a la comunidad desconcertada.
<article> <h3 class="text-pretty">Cierra un querido puesto de sopa en Manhattan</h3> <p>Los neoyorquinos se enfrentan al frío...</p></article>Antepone a la utilidad text-wrap el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>Obtén más información sobre el uso de variantes en la documentación de variantes.