Playground de text-wrap en CSS

Explora text-wrap con un selector para comparar estrategias de salto de linea, equilibrio de titulares y ajustes pensados para lectura.

BaselineLab crea titulares claros para interfaces responsive. Ajusta text-wrap y mira como cambian los saltos de linea en un bloque estrecho.

HTML

<p class="text-wrap-sample">
  BaselineLab crea titulares claros para interfaces responsive.
  Ajusta text-wrap y mira como cambian los saltos de linea en un bloque estrecho.
</p>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<p class="max-w-md text-4xl font-bold leading-tight text-balance">
  BaselineLab crea titulares claros para interfaces responsive.
  Ajusta text-wrap y mira como cambian los saltos de linea en un bloque estrecho.
</p>

CSS

.text-wrap-sample {
  max-inline-size: 28rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}