Playground de text-fit en CSS

Explora text-fit con los valores none, grow y shrink, los modos consistent, per-line y per-line-all y un porcentaje opcional para limitar el factor de escala.

Presets

Elige una configuración como punto de partida y ajusta después cualquier control.

Propiedad

text-fit

none conserva el tamaño usado, grow solo puede aumentarlo y shrink solo puede reducirlo. text-fit se aplica a contenedores de bloque y se hereda.

Cálculo por línea

consistent aplica un único factor a todas las líneas. per-line calcula cada línea, salvo la última y las que terminan con un salto forzado. per-line-all también ajusta esas líneas.

Limitar el factor de escala

Con grow, un porcentaje de 100% o más fija el factor máximo. Con shrink, un porcentaje entre 0% y 100% fija el factor mínimo.

Contenido y caja

Texto de ejemplo

white-space

normal permite el ajuste de línea habitual. nowrap ayuda a probar shrink con palabras o etiquetas que superarían el ancho disponible.

Diseña titulares que llenan cada línea sin cálculos de JavaScript.

Tu navegador todavía no soporta text-fit. La previsualización mantiene el font-size original, pero el código generado conserva la propiedad.

HTML

<h2 class="text-fit-sample">
  Diseña titulares que llenan cada línea sin cálculos de JavaScript.
</h2>

Tailwind CSS

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

<h2 class="w-[520px] max-w-full font-extrabold text-[32px] leading-[1.05] whitespace-normal [text-fit:grow_consistent_180%]">
  Diseña titulares que llenan cada línea sin cálculos de JavaScript.
</h2>

CSS

.text-fit-sample {
  inline-size: 520px;
  max-inline-size: 100%;
  font-family: system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
  white-space: normal;
  text-fit: grow consistent 180%;
}