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

css
/* 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 valuenormal
Applies toBlock containers and inline boxes
Inheritedno
Computed valuethe specified keyword
Animation typediscrete

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.

css
.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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
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