v150 · CSS · Typography · demo

Caption Fitter

Each card has a caption of a different length — all set to the same font-size. text-fit: balance scales each one to span exactly the card's width, aligning the visual weight of text and image with no per-card adjustments.

photo

Coast

One word — scaled up to fill card width

photo

Morning light

Two words — balanced across the card

photo

Harbour at dusk

Three words — fits naturally

photo

Reflections on the water

Longer caption — scaled down to fit

Before vs After — same caption, same font-size

Without text-fit (ellipsis or overflow)

Morning light


Reflections on the water

With text-fit: balance — fills the width

Morning light


Reflections on the water

/* Chrome 150: scale captions to fill card width */
.card-caption {
  font-size: 1.4rem;
  white-space: nowrap;

  /* scale-down: only shrinks to prevent overflow */
  text-fit: scale-down;

  /* balance: also expands short text to fill the width */
  text-fit: balance;
}

/* No per-card font-size overrides needed.
   No JavaScript measuring loops.
   Works even if card width changes at every breakpoint. */

see also

scenario focus

Select a scenario to focus its rendered example and summary.