text-box
text-box is a shorthand that sets which side of the lines to trim (text-box-trim) and how far to trim (text-box-edge) together. With just text-box: cap alphabetic, the first line is trimmed down to the cap height and the last line up to the baseline.
Syntax
normal | <'text-box-trim'> || <'text-box-edge'>Preview
Shorthand breakdown
text-boxCode
.box {
text-box: cap alphabetic;
}Controls
About
Values
normal: trims nothing. This is the initial value, which sets text-box-trim tononeand text-box-edge toauto.trim-start,trim-end,trim-bothornone: becomes text-box-trim (which side to trim).- One or two keywords such as
cap alphabetic, orauto: becomes text-box-edge (how far to trim).
text-box-trim can come before or after text-box-edge. The controls on this page write trim first, then edge.
Omitted values
Leaving out text-box-edge sets it to its initial value, auto. Leaving out text-box-trim, however, sets it to trim-both, not to its initial value none. So text-box: cap alphabetic is the same as text-box: trim-both cap alphabetic and trims both sides. The shorthand breakdown on this page also shows trim-both when trim is left out.
What it changes
The preview on this page is a block box holding a single line of large Hxpあ text. Its top and bottom padding are both 16px, so trimming makes the box shorter and the space above and below the text matches the padding. The auto edge trims only the space added by line-height (the half-leading).
Watch out
- Supported in Chrome and Edge 133, Safari 18.2 and Firefox 154 and later. Only Firefox supports the
ideographicandideographic-inkedges so far. - On a flex or grid container, it does not reach the items inside. Put it on the block box that holds the text you want to trim.