Paragraphs & wrapping
text-box-trim
text-box-trim removes the space outside the text above the first line and below the last line of a block. It fixes text that looks too low even with equal top and bottom padding.
Syntax
none | trim-start | trim-end | trim-bothPreview
Code
.box {
text-box-edge: cap alphabetic;
text-box-trim: trim-both;
}Controls
About
Values
none: trims nothing. This is the initial value.trim-start: trims above the first line.trim-end: trims below the last line.trim-both: trims both above the first line and below the last line.
How far it trims
text-box-edge decides where to cut. With its initial auto, only the space outside the font's top and bottom (ascent and descent) is removed, that is, the extra space added by line-height (half-leading). With text-box-edge: cap alphabetic the box fits from the top of capital letters to the baseline, so the padding becomes the visible space around the text. The preview on this page sets cap alphabetic as a helper declaration.
Only the content edge is trimmed; padding and borders stay. The spacing between lines stays at line-height. When trimming at the baseline, the parts of p or g below the baseline stick out of the content, so keep some bottom padding on boxes with overflow: hidden.
When it applies
- It applies to block boxes such as
display: blockand to multi-column boxes, where it trims the first and last line of each column. - On a flexbox or grid container it does not reach the items. Set it on the items instead.
- Nothing is trimmed when a child element's padding or border sits between the box and its first (or last) line.
- It can also be set on inline elements, where it trims the height their background covers. Only Firefox supports that so far (Safari partly).
Browser support
Supported in Chrome and Edge 133, Safari 18.2 and Firefox 154 and later. The text-box shorthand sets text-box-trim and text-box-edge together (text-box: trim-both cap alphabetic). If text-box leaves out the text-box-trim value, it becomes trim-both, not the initial none.