CSS text-fit playground

Explore text-fit with none, grow, and shrink, the consistent, per-line, and per-line-all modes, and an optional percentage that limits the scaling factor.

Presets

Choose a configuration as a starting point, then adjust any control.

Property

text-fit

none preserves the used size, grow can only increase it, and shrink can only reduce it. text-fit applies to block containers and is inherited.

Per-line calculation

consistent applies one factor to every line. per-line calculates each line except the last and lines ending in a forced break. per-line-all also fits those lines.

Limit the scaling factor

With grow, a percentage of 100% or more sets the maximum factor. With shrink, a percentage between 0% and 100% sets the minimum factor.

Content and box

Sample text

white-space

normal allows regular line wrapping. nowrap helps test shrink with words or labels that would exceed the available width.

Design headlines that fill every line without JavaScript calculations.

Your browser does not support text-fit yet. The preview keeps the original font-size, while the generated code preserves the property.

HTML

<h2 class="text-fit-sample">
  Design headlines that fill every line without JavaScript calculations.
</h2>

Tailwind CSS

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

<h2 class="w-[520px] max-w-full font-extrabold text-[32px] leading-[1.05] whitespace-normal [text-fit:grow_consistent_180%]">
  Design headlines that fill every line without JavaScript calculations.
</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%;
}