text-box
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The text-box
CSS property is a shorthand that corresponds to the text-box-trim
and text-box-edge
properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Single keyword */
text-box: normal;
/* One text-box-edge keyword */
text-box: trim-start text;
text-box: trim-both text;
/* Two text-box-edge keywords */
text-box: trim-start cap alphabetic;
text-box: trim-both ex text;
/* Global values */
text-box: inherit;
text-box: initial;
text-box: revert;
text-box: revert-layer;
text-box: unset;
Values
The text-box
value can be composed of a text-box-trim
value and a text-box-edge
value separated by a space. See those pages for value descriptions.
The text-box
property can also take a keyword of normal
, which is equivalent to text-box: none auto;
If text-box-trim
is omitted, it is set to trim-both
. If text-box-edge
is omitted, it is set to auto
.
Formal definition
Initial value | normal |
---|---|
Applies to | Block containers and inline boxes |
Inherited | no |
Computed value | the specified keyword |
Animation type | discrete |
Formal syntax
text-box =
normal |
<'text-box-trim'> || <'text-box-edge'>
<text-box-trim> =
none |
trim-start |
trim-end |
trim-both
<text-box-edge> =
auto |
<text-edge>
<text-edge> =
[ text | ideographic | ideographic-ink ] |
[ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]
Description
The height of text-only content is relative to the height of the font. In digital font files, the height contains all characters, including capital letters, ascenders, descenders, etc. Different fonts have different base line-heights, meaning that lines of text with the same font-size
will produce line boxes of differing heights, affecting the appearance of spacing between lines.
The text-box
properties enable trimming off extra spacing from the block-start edge and block-end edge of a text element's block container, which can include the leading at the text's block-start edge and block-end edges, and the spacing defined inside the font (as described above). This makes it much easier to control text spacing in the block direction.
Examples
Basic text-box
usage
In the following example, we have two <p>
elements with classes of one
and two
.
We apply a text-box
value of trim-end cap alphabetic
to the first paragraph. The text-box-edge
value of cap alphabetic
specifies trimming the over edge to the top of the capital letters and the under edge flush with the text baseline. Because the text-box-trim
value is set to trim-end
, only the under edge of the paragraph is trimmed.
We apply a text-box
value of trim-both ex alphabetic
to the second paragraph. The text-box-edge
value of ex alphabetic
specifies trimming the over edge to the font's x-height (the top edge of the short lower-case letters) and the under edge flush with the text baseline. Because the text-box-trim
value is set to trim-both
, both the over and under edge of the paragraph are trimmed.
.one {
text-box: trim-end cap alphabetic;
}
.two {
text-box: trim-both ex alphabetic;
}
p {
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
Result
The output is as follows. Note how we've included a top and bottom border on each paragraph, so that you can see how the space has been trimmed in each case.
Specifications
Specification |
---|
CSS Inline Layout Module Level 3 # text-box-shorthand |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-box | ||||||||||||
normal |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
See also
text-box-edge
,text-box-trim
<text-edge>
data type- CSS inline layout module
- CSS text-box-edge on developer.chrome.com (2025)