text-wrap

Ejemplos

Permitir que el texto se ajuste

Usa la utilidad text-wrap para ajustar el texto desbordante en múltiples líneas en puntos lógicos del texto:

<article class="text-wrap">
  <h3>Cierra un querido puesto de sopa de Manhattan</h3>
  <p>Los neoyorquinos enfrentan el frío invernal...</p>
</article>

Evitar que el texto se ajuste

Usa la utilidad text-nowrap para evitar que el texto se ajuste, permitiendo que se desborde si es necesario:

<article class="text-nowrap">
  <h3>Cierra un querido puesto de sopa de Manhattan</h3>
  <p>Los neoyorquinos enfrentan el frío invernal...</p>
</article>

Ajuste de texto equilibrado

Usa la utilidad text-balance para distribuir el texto uniformemente en cada línea:

<article>
  <h3 class="text-balance">Cierra un querido puesto de sopa de Manhattan</h3>
  <p>Los neoyorquinos enfrentan el frío invernal...</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 encabezados.

Ajuste de texto "bonito"

Usa la utilidad text-pretty para evitar huérfanos (una sola palabra en su propia línea) al final de un bloque de texto:

<article>
  <h3 class="text-pretty">Cierra un querido puesto de sopa de Manhattan</h3>
  <p>Los neoyorquinos enfrentan el frío invernal...</p>
</article>

Responsive design

Prefija una utilidad text-wrap con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<h1 class="text-pretty md:text-balance ...">
  <!-- ... -->
</h1>

Aprende más sobre el uso de variantes en la documentación de variantes.