v150 · CSS · Fit Value Comparison

Fit Value Comparison

Compare the current text-fit values on the same text at a controlled container width. Use the slider to see how none overflows, grow expands short text, shrink reduces oversized text, and a percentage clamp limits how far shrinking can go.

Checking text-fit CSS support…

adjust text and container

350px
Text sample:

Standard sample applied.

    text-fit: none
    (no fitting)
    Headline Text
    text-fit: grow
    (fill spare space)
    Headline Text
    text-fit: shrink
    (fit overflow)
    Headline Text
    shrink 60%
    (clamped)
    Headline Text

    value reference

    Value Grows to fill? Shrinks to fit? Typical use
    none No No (overflows) Default; text has a fixed font-size
    grow Yes No Short hero headings, banners, fill-width labels
    shrink No Yes Card titles that must fit but shouldn't enlarge
    shrink 60% No Yes, until the 60% scale clamp Labels with a readability floor

    percentage clamp

    /* Constrain how far shrink can scale */
.bounded {
  font-size: 4rem;
  text-fit: shrink 60%;  /* do not scale below 60% */
}

/* Useful for: dashboard widgets, card titles, button labels */

    see also

    implementation reference

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