text-box-edge

The text-box-edge property value is specified as auto or a <text-edge> value:

auto

The default value. Equivalent to the text-edge value text.

<text-edge>

One or two separate keywords representing over and under edge positions to trim the text element's block container to.

• If two values are specified, the first value specifies the trimming behavior to apply to the block-start (over) edge of the text, and the second value specifies the trimming behavior to apply to the block-end (under) edge of the text.
  • Valid over edge trimming values: text, cap, and ex.
  • Valid under edge trimming values: text and alphabetic.
• If one value is specified, it specifies the over and under edge trimming behavior. At the time of writing, the only valid single value is text.

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-edge property allows you to trim space from the start and/or end edge of the text's block container. This 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). It does this by specifying a <text-edge> value that indicates the over edge and under edge to trim the space to.

Which edge(s) to trim space from is specified using the text-box-trim property. For example, you can choose to trim space from the over edge or the under edge of the text's block container, or both.

These properties make it much easier to control text spacing in the block direction.

text-box-edge = 
  auto         |
  <text-edge>  

<text-edge> = 
  [ text | ideographic | ideographic-ink ]            |
  [ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]  

The most common text-box-edge values you'll use for horizontal writing-mode languages such as English or Arabic are cap alphabetic and ex alphabetic. The cap value trims the over edge of the text element's block container to the top of the capital letters, whereas ex trims the over edge to the font's x-height (the top edge of the short lower-case letters). In each case, alphabetic trims the under-edge flush with the text baseline.

In this example, we demonstrate the effect of both of these common values, on two <p> elements. Additionally, a text-box-trim value of trim-both has been set on both of them, so that their start and end edges are trimmed.

p {
  text-box-trim: trim-both;
  border-top: 5px solid magenta;
  border-bottom: 5px solid magenta;
}

.one {
  text-box-edge: cap alphabetic;
}

.two {
  text-box-edge: ex alphabetic;
}

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.

For a complete interactive text-box-edge example, see the text-box-trim page.

• text-box, text-box-trim
• <text-edge> data type
• CSS inline layout module
• CSS text-box-edge on developer.chrome.com (2025)