v149 · css · shipped

CSS text-box

Trim the invisible leading space above the cap height and below the alphabetic baseline that line-height adds to every text block. The text-box shorthand (or its longhands text-box-trim / text-box-edge) removes those gaps, making precise text-to-element alignment a pure-CSS problem.

at a glance

Shipped in	Chrome 149 (desktop + Android)
Status	Enabled by default
Flag	None
Spec	CSS Inline Layout Level 3 §text-box
ChromeStatus	chromestatus.com/feature/5174589850648576

why it exists

Every line of text in CSS inherits half-leading above and below from its computed line-height. That invisible space is great for multi-line prose but a nuisance when you want a heading to sit flush against a coloured box, or an icon to align optically with adjacent text. Before text-box, designers faked the trim with negative margins or magic numbers that broke on font changes. text-box instructs the browser to clip the block-start and/or block-end edge of a text container exactly at the defined text metric.

Source: CSS Inline Layout Level 3 §propdef-text-box-trim.

the properties

text-box (shorthand)

Property	`text-box`
Syntax	`normal \| <text-box-trim> \|\| <text-box-edge>`
Applies to	Block containers, multi-column containers, inline boxes
Inherited	No (text-box-edge is separately inherited)
Initial	`normal`
Notes	When shorthand omits `text-box-trim`, it defaults to `trim-both`. `normal` resets both longhands.

text-box-trim

Value	Effect
`none`	No trimming. Default; existing behaviour.
`trim-start`	Trim the block-start side of the first line (removes leading above).
`trim-end`	Trim the block-end side of the last line (removes leading below).
`trim-both`	Both trim-start and trim-end.

text-box-edge

Value	Effect
`auto`	Uses the `line-fit-edge` value; "leading" is treated as "text".
`text`	Trim to the text-over/text-under baselines.
`cap`	Trim block-start to the cap-height baseline (top of uppercase letters).
`ex`	Trim block-start to the x-height baseline.
`alphabetic`	Trim block-end to the alphabetic baseline (bottom of most lowercase letters).
`ideographic`	Trim to ideographic-over/under baselines (for CJK).
`ideographic-ink`	Trim to ideographic-ink-over/under baselines.

The most common pair is cap alphabetic: trim above to cap height, below to the alphabetic baseline. This is the "tight Latin text" preset.

Source: CSS Inline Layout Level 3 §propdef-text-box-edge.

Specification-grammar disagreement, both sides reported rather than resolved (fetched 2026-10-07): this page lists flat single-keyword values for the shorthand, while the editor's draft defines a two-value positional production for text-box-edge and quotes the property reference as <'text-box-trim'>. Neither side is adjudicated here.

example: heading flush inside a coloured box

h1 {
  /* Without text-box, the padding visually looks uneven because
     of half-leading above and below the text. */
  padding: 1rem;
  background: oklch(90% 0.15 260);

  /* With text-box: leading is removed; padding is optically even. */
  text-box: trim-both cap alphabetic;
}

example: icon + text optical alignment

.label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.label span {
  font-size: 1rem;
  line-height: 1.5;
  /* Remove the invisible leading so the text baseline aligns
     with the icon's visual centre, not the line box centre. */
  text-box: trim-both cap alphabetic;
}

browser support

Chrome	149+
Edge	149+ (tracking Chromium)
Firefox	No signal yet
Safari	No signal yet

Source: chromestatus.com/feature/5174589850648576, May 2026.

Browser-support and milestone disagreement, both sides reported rather than resolved (fetched 2026-10-07): this page reports "No signal yet" for both Firefox and Safari and "149+" for Chrome, while the ChromeStatus record for feature 5174589850648576 (accurate as of 2025-02-14) reports Firefox "Positive" (mozilla/standards-positions#1105), Safari "In development" (WebKit/standards-positions#432), and Chrome "Enabled by default" with a shipping milestone of 133 on desktop, Android and WebView. Neither side is adjudicated here.