v150 · CSS · Typography · demo

Headline Scaler

Drag the slider to shrink the container. text-fit: scale-down scales each headline's font size to prevent overflow — no ellipsis, no JavaScript, no fixed breakpoints.

In Chrome 150+, text-fit: scale-down prevents text overflow by reducing font-size automatically. In older browsers the text overflows or requires a JS polyfill.
600px

text-fit: scale-down

Chrome ships text-fit for CSS

text-fit: scale-down (short headline)

Web Platform

text-fit: balance (expands short text to fill width)

Web Platform

No text-fit (for comparison — uses text-overflow: ellipsis)

Chrome ships text-fit for CSS

scale-down — long vs short

Revolutionary new feature lands in Chrome 150

Feature ships

balance — long vs short

Revolutionary new feature lands in Chrome 150

Feature ships

/* Chrome 150: text-fit — scale font-size to fill container */

/* Only shrink — prevents overflow, never expands */
.headline {
  font-size: 3rem;
  white-space: nowrap;
  text-fit: scale-down;
}

/* Also expand — short text fills the full width */
.hero-title {
  font-size: 3rem;
  white-space: nowrap;
  text-fit: balance;
}

/* Before Chrome 150: JS loop or vw hacks */
/* font-size: clamp(1rem, 5vw, 4rem); — only approximates */

see also