CSS text-box-trim Property

The text-box-trim property controls whether and how user agents reduce or ignore the empty, transparent, or inkless portions of glyph bounding boxes when constructing inline boxes and calculating inline-level geometry. By trimming that extra space around glyph outlines, the property influences the visual tightness of text runs - for example it can reduce apparent gaps between adjacent glyphs or between lines when fonts include built-in side bearings, accent overhangs, or extra internal padding. This is a cosmetic/layout control that changes the geometry used for painting and layout without altering the underlying character content.

Trimming affects many aspects of inline layout: how the browser computes line boxes, where underlines and strike-throughs are positioned, and the intersection of adjacent inline boxes. Because those geometry calculations feed into spacing and alignment, the property interacts with vertical rhythm and line spacing; see line-height for the related concept of how line boxes are sized. Trimming also has consequences for how overflow and truncation appear at the inline edges - it changes what the UA considers the visible text box, which can affect clipping and elision behavior similar in purpose to text-overflow. Finally, the way words wrap and white-space collapse are presented can change when the trimmed glyph metrics shift the breaking opportunities; compare this when tuning wrapping behavior with white-space.

In painting and hit-testing, trimming moves where backgrounds, borders, and decorations are applied because those paints often follow the inline box extents. That means selection highlights, caret placement, and pointer hit areas can visually shift when trimming is applied, so it’s important to verify interactive elements behave as expected. Trimming also interacts with spacing you might intentionally add around text via layout properties - for example, internal visual tightening produced by trimming should be considered alongside any extra space introduced with padding on inline wrappers or containers.

When deciding whether to use trimming, consider typography goals and cross-font consistency: it’s most useful when you want optical tightness (e.g., for compact UI labels or tight headline typography) or to correct large built-in font bearings that create unwanted visual gaps. Because trimming depends on font metrics and rendering details, test with the specific fonts, sizes, and user-agent environments you target - fonts with heavy diacritics, variable fonts, or fallbacks can change how much trimming matters. Finally, treat trimming as a visual refinement tool rather than a substitute for proper font choice or robust layout practices; it’s best used for controlled situations where you need the extra optical adjustment.