CSS text-wrap playground

Explore text-wrap with a selector for comparing line breaking, balanced headings, and readability-focused wrapping.

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

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<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;
}