v150 · CSS · Sizing · Components

Responsive Tags

Tags and badges are the perfect use case for width: fit-content(cap): they should hug short labels and clip long ones. Add your own tags, pick a cap, and compare all three sizing strategies side-by-side.

Checking fit-content() on width support…
width: fit-content(120px) — shrinks to content width, capped at 120px. Ellipsis on overflow.
Cap width: px % cap: %
.tag { width: fit-content(120px); }
Add your own tags

why this pattern matters

Before Chrome 150, the two closest options were:
• width: max-content — no cap, long labels grow unbounded
• max-width: 120px; width: 100% — always 120px wide even when content is shorter

width: fit-content(120px) combines both: it's equivalent to min(max-content, max(min-content, 120px)). Content shrinks the element below 120px freely; anything wider than 120px gets clipped. One property, perfect behaviour.

see also