Skip to main content
PUBLIC.INTERNET
⚡ Instant Access🔒 Privacy First🆓 Always Free📱 Works Everywhere

CSS text-box-trim Previewer

Every line of text on the web carries invisible space above and below it, the half-leading the browser adds when it splits line-height around the glyphs. That space is why a heading never sits quite flush with an icon next to it and why vertical centering of text always feels slightly off. The CSS text-box-trim property (with text-box-edge, together written as the text-box shorthand) finally lets you trim that space to a meaningful edge like the cap height or the alphabetic baseline. This tool makes the effect visible, which is the hard part: it renders the same text twice with a tinted highlight box so you can directly compare the untrimmed and trimmed versions and watch the box hug the letters. Choose whether to trim the top, bottom, or both edges, and pick the over edge (cap, ex, or text) and under edge (alphabetic or text). A second demo aligns the text next to a circular avatar so you can see trimmed text center cleanly. Copy the resulting CSS in both longhand and shorthand.

CSS

Default (no trim)
Hg
With text-box trim
Hg
Alignment with an icon (trimmed text centers cleanly)
Trimmed heading
How to Use text-box-trim
  1. Pick what to trim - Choose trim-both, trim-start (top only), or trim-end (bottom only) from the text-box-trim menu.
  2. Set the edges - Choose the over edge (cap height, x-height, or font text edge) and the under edge (baseline or font text edge).
  3. Compare the boxes - Watch the highlighted sample on the right tighten against the letters versus the untrimmed default on the left.
  4. Check the alignment demo - See how trimmed text lines up next to the avatar circle without the usual half-leading gap.
  5. Copy the CSS - Copy the longhand text-box-trim and text-box-edge rules, or the text-box shorthand.
Why This Tool?
 Designers have wanted leading-trim for years (the concept came out of Microsoft's design team) precisely because half-leading makes pixel-accurate spacing impossible. The trouble with learning text-box-trim from documentation is that the whitespace it removes is invisible by definition, so a static code sample teaches you the syntax but not the effect. Showing the trimmed and untrimmed text with a background highlight, side by side, is the only way to actually see what each edge value does, and that is what this previewer is for. 
 The edge choices matter more than they first appear. Trimming the over edge to cap aligns the box to the top of capital letters, which is usually what you want for headings, while ex aligns to the x-height for tighter lowercase-heavy text. The under edge trimmed to alphabetic sits on the baseline. Getting these right is what lets a heading butt perfectly against a rule, an icon, or the edge of a card. 
text-box-trim is a progressive enhancement: it reached browsers in 2025 (Chrome and Edge 133, Safari 18.2) and is simply ignored elsewhere, so there is no downside to adopting it. This tool checks support and tells you whether the live preview reflects the real feature, so you can dial in the edges and ship the CSS knowing exactly how it behaves.