text-box-trim

The text-box-trim property let us specify whether to clip the whitespace above and/or below text. It’s used along the text-box-edge property to set how much of the whitespace should be trimmed.

.element {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

text-box-trim and text-box-edge can be set through the text-box shorthand property.

The text-box-trim property is defined in the CSS Inline Layout Module Level 3 specification.

Syntax

text-box-trim: none | trim-start | trim-end | trim-both;

• Initial Value: none
• Applies to: block containers, multi-column containers, and inline boxes
• Inherited: no
• Percentages: n/a
• Computed value: the specified keyword
• Canonical order: per grammar
• Animation type: discrete

Values

text-box-trim: none;
text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;

• none: No whitespace is trimmed.
• trim-start: Trims the half-leading above text.
• trim-end: Trims the half-leading under text.
• trim-both: Trims both the half-leading above and under text.

Remember that text-box-trim only trims the half-leading on the first and last line, not in between.

The problem with text leading

In the past, there wasn’t a bulletproof way to remove spacing between lines (called leading) without setting negative margins or padding with magic numbers, but using text-box-trim and text-box-edge, we can pick whether to trim the half-leading over or under the text, and how much of that whitespace should be trimmed.

For a more complete explanation on leading, you can check out the text-box entry or��Matthias Ott’s post on leading.

Basic usage

The text-box-trim gives us three options on where to trim text: over, under and both sides, using the trim-start, trim-end and trim-both, respectively.

The trim-start and trim-end values can be used when we have to line up text against another element’s top or bottom, something which leading often misaligns.

h1 {
  text-box-trim: trim-start;
  text-box-edge: cap text;
}

p {
  text-box-trim: trim-end;
  text-box-edge: text alphabetic;
}

Meanwhile, the trim-both value is better used when we have to center a text element against another element.

.element{
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

It is also useful when we have to center text within its own context box. For example, text inside buttons often looks misaligned since the half-leading over and under text may vary. We can compensate by adjusting its padding arbitrarily—which changes from font to font, or we can remove leading altogether using trim-both:

.element{
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

Demo

Specification

The text-box-trim property is defined in the CSS Inline Layout Module Level 3 specification, which is currently in Editor’s Draft.

Browser support

More information

• Two CSS Properties for Trimming Text Box Whitespace (Daniel Schwarz)
• CSS text-box-trim (Adam Argyle)
• The Thing With Lead­ing in CSS (Matthias Ott)

Related