Modern CSS Text Fit
Browser state ·

Text fitting has moved into CSS.

Chrome 150 introduced native text-fit. The broader solution is still a layered system: intrinsic layout, wrapping, container adaptation, bounded fitting, and deterministic DOM validation.

Native fitting is realChromium can scale text to the inline width of its box.
Cross-browser remains layeredSafari and Firefox still need CSS fallback and optional JS fitting.
Validation is still requiredNative fitting does not detect parent escape, clipping, overlap, or accessibility regressions.
What changed

The browser now owns one part of the problem.

text-fit removes a major class of headline-sizing scripts. It does not replace component layout, content-aware fallback states, or post-render validation.

Shipped

Chrome 150

text-fit scales text nodes to fit the inline width of the containing box. Use it as a progressive enhancement.

Open review

Safari / WebKit

The standards-position issue remains open. No production implementation should be assumed.

No production support

Firefox

Continue to use the CSS-first baseline and a bounded JavaScript fallback where exact fitting is a requirement.

Support matrix

Separate fitting, wrapping, alignment, and truncation.

These features solve different problems. Treating them as interchangeable produces fragile components.

Scroll horizontally to compare all browser columns.

FeatureChromiumSafariFirefoxUse
text-fitChrome 150NoNoProgressive enhancement
text-wrap: balanceSupportedSupportedSupportedProduction headings
text-wrap: prettySupportedSafari 26NoLong-form enhancement
text-box-trimChrome 133Safari 18.2Preview onlyVertical alignment
text-autospaceSupportedSupportedSupportedMixed CJK / Latin spacing
Unprefixed line-clampExperimentalPreviewNoAvoid as a dependency
Live playground

Test native fitting and the fallback in your browser.

The demo feature-detects text-fit. Disable native mode to inspect the bounded binary-search shim.

560px
64px
70%
Use native CSS
Only enabled when supported.
Checking support Mode pending
Responsive component boundary
Enterprise AI platforms need typography that survives real content.
Font size—px
Lines—
Client width—px
Scroll width—px
Generated CSS
Runtime evidence

Feature-detect the capability, not the browser.

User-agent assumptions decay. The current browser can report which declarations it parses.

Parsing support is not complete behavioral validation.

A positive CSS.supports() result confirms that the declaration is recognized. Layout tests must still verify line height, inline children, zoom, localization, and dynamic content.

Layer 1

Build a resilient CSS baseline first.

Intrinsic sizing and wrapping solve more failures than text shrinking. These declarations should exist even when native fitting is available.

CSS · baseline component
.component {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.component__title {
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: clamp(1.75rem, 1rem + 5cqi, 4.5rem);
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
Layer 2

Add native fitting as progressive enhancement.

Keep the baseline intact. Use a bounded minimum scale and prefer consistent for ordinary interface typography.

CSS · native enhancement
@supports (text-fit: shrink consistent 70%) {
  .component__title[data-text-fit="allowed"] {
    font-size: 4.5rem;
    line-height: 1.05;
    text-fit: shrink consistent 70%;
  }
}
Use unitless line height.

Fixed pixel line heights do not necessarily follow the fitted font size. Unitless values preserve proportional rhythm.

Layer 3

Shim only opted-in text.

The fallback uses a bounded binary search. It writes one custom property and stops at an authored minimum.

TypeScript · bounded fallback
function fitText(
  element: HTMLElement,
  maximumPx: number,
  minimumPx: number,
): boolean {
  let low = minimumPx;
  let high = maximumPx;
  let best = minimumPx;

  const fits = () =>
    element.scrollWidth <= element.clientWidth + 1;

  for (let i = 0; i < 8; i += 1) {
    const candidate = (low + high) / 2;
    element.style.setProperty("--fit-size", `${candidate}px`);

    if (fits()) {
      best = candidate;
      low = candidate;
    } else {
      high = candidate;
    }
  }

  element.style.setProperty("--fit-size", `${best.toFixed(2)}px`);
  return fits();
}
Layer 4

Validate the rendered result.

Native fitting cannot prove that the overall component is correct. Generated pages need a structured layout report.

Measure

clientWidth, scrollWidth, getBoundingClientRect(), and text Range fragments.

Observe

ResizeObserver, MutationObserver, font-loading events, and visual viewport changes.

Classify

Separate self overflow, parent escape, viewport escape, line-count excess, and alignment drift.

Correct

Reflow first. Wrap second. Compact third. Shrink fourth. Truncate only by explicit policy.

Repair hierarchy

Do not shrink before the layout has earned it.

The system should preserve content and user-selected text size before optimizing visual density.

  1. Correct intrinsic sizingUse min-inline-size: 0 and minmax(0, 1fr).
  2. Improve wrappingBalance headings, allow token breaks, and declare language.
  3. Adapt the componentStack regions and reduce nonessential spacing through container queries.
  4. Apply bounded fittingUse native text-fit or the fallback only on opted-in display text.
  5. Truncate by policyInformation loss must be intentional, accessible, and recoverable.
Generated layout contract

A repeatable contract for ChatGPT-authored pages.

Reliability comes from generating against machine-testable constraints rather than relying on visual intuition alone.

Component boundaries

Declare container contexts and stable data-layout-id attributes.

Explicit fit policy

Mark only approved titles or labels with data-text-fit="allowed".

Accessible minimums

Set a minimum scale or minimum font size. Never shrink without a lower bound.

Long-content fixtures

Test URLs, UUIDs, translated strings, CJK, RTL, and unexpectedly large numeric values.

Viewport matrix

Validate mobile portrait, mobile landscape, tablet, desktop, zoom, and browser text scaling.

Structured report

Expose findings through a global report object and visible preview diagnostics.

Provenance

Research sources and claim boundaries.

Browser status changes quickly. This page records its generated date and uses feature detection for the current runtime.

Generated

· America/Bogota

Method

Primary browser release notes, standards-position issues, specifications, and MDN compatibility references.

Runtime status

Layout check pending.