v150 · CSS · Text Fit Demo

Text Fit Demo

Drag the resize handle on the panel to see text-fit: grow scale a short headline up to fill the available width. The comparison grid also shows text-fit: shrink reducing oversized text when space gets tight — no JavaScript resize loop required.

Checking text-fit support…

resize to see text-fit in action

← drag right edge to resize →

Hello World

text-fit: grow · base font-size: 1.5rem

controlled text and width

400px
Text sample:

Standard sample applied.

    font-size: fixed (1.8rem)

    Hello World

    text-fit: grow

    Hello World

    text-fit: shrink

    Hello World

    code

    /* Chrome 150+ */
.responsive-heading {
  font-size: 1.5rem;
  text-fit: grow;             /* scale up to fill the line box */
}

/* Graceful fallback for older browsers */
@supports not (text-fit: grow) {
  .responsive-heading {
    font-size: clamp(1rem, 5vw, 5rem); /* approximate */
  }
}

/* shrink: only scale down when text overflows */
.label {
  font-size: 1.5rem;
  text-fit: shrink;           /* stays 1.5rem if it fits; shrinks if not */
}

    see also

    implementation reference

    Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗