text-box-trim
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-trim
CSS property specifies which of the over and under edges of text content to trim from a text element's block container.
Vertical spacing differs between fonts, making consistent typesetting historically challenging on the web. The text-box-trim
property — along with its counterpart property text-box-edge
, which specifies how much space to trim — makes consistent vertical spacing of text easier to achieve.
Note:
The text-box
shorthand property can be used to specify the text-box-trim
and text-box-edge
values in a single declaration.
Syntax
/* Keywords */
text-box-trim: none;
text-box-trim: trim-both;
text-box-trim: trim-start;
text-box-trim: trim-end;
/* Global values */
text-box-trim: inherit;
text-box-trim: initial;
text-box-trim: revert;
text-box-trim: revert-layer;
text-box-trim: unset;
Value
The text-box-trim
property value may be specified as one of the following keywords:
none
-
The default value. No space is trimmed from the text.
trim-both
-
The start (over) and end (under) edges are both trimmed.
trim-start
-
The start (over) edge is trimmed.
trim-end
-
The end (under) edge is trimmed.
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-trim
property allows you to trim the over and under edge of the text's block container, making it easier to control text spacing in the block direction.
The actual amount of space trimmed is specified using the text-box-edge
property. For example, you can choose to trim the over edge in line with a font's capital letters or lower-case letters, and the under edge flush with the font's baseline.
Formal definition
Initial value | none |
---|---|
Applies to | Block containers and inline boxes |
Inherited | no |
Computed value | the specified keyword |
Animation type | discrete |
Formal syntax
Examples
Basic text-box-trim
usage
In the following example we set text-box-edge: cap alphabetic
on two paragraphs, which trims the over edge of the text elements' block containers to the top of the capital letters and the under edge flush with the text baseline.
We then set text-box-trim
values of trim-end
on the first one, and trim-both
on the second one. This results in the first paragraph only having its under edge trimmed, whereas the second one has both the over and under edge trimmed.
p {
text-box-edge: cap alphabetic;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
.one {
text-box-trim: trim-end;
}
.two {
text-box-trim: trim-both;
}
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.
Interactive text-box-trim
and text-box-edge
value comparison
In this example we provide a user interface that allows you to choose the text-box-trim
and text-box-edge
values applied to a paragraph of text.
HTML
In our HTML, we include three main items:
- Three
<select>
elements allowing you to set which edges of the paragraph should be trimmed (thetext-box-trim
value) and how much space to trim from the block-start and block-end edges of the paragraph (thetext-box-edge
value). - A
<p>
element containing text, which thetext-box-*
values are applied to. This paragraph hascontenteditable
set on it so you can edit the text. - An
<output>
element that displays thetext-box-*
declarations applied to the paragraph. This is updated when a selection is made.
We also import a font from the Google Fonts service to apply to our demo's text.
We have hidden the exact HTML code for brevity.
CSS
In our CSS, we apply the imported font to the <html>
element and lay out the UI using flexbox. We have hidden most of the CSS code for brevity, but below we show the rules styling the paragraph the text-box-*
effects are applied to and the <output>
that shows the text-box-*
rules being applied:
p {
margin: 0;
font-size: 6rem;
font-weight: bold;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
output {
border: 2px solid gray;
border-radius: 10px;
padding: 10px;
margin: 0;
width: fit-content;
}
Again, note how we've included a top and bottom border on the .display
paragaph, so that you can see how the space being trimmed changes when different text-box-*
values are selected.
JavaScript
In the JavaScript, we start by grabbing references to the three <select>
elements and two <p>
elements:
const boxTrimSelect = document.getElementById("box-trim");
const trimOverSelect = document.getElementById("trim-over");
const trimUnderSelect = document.getElementById("trim-under");
const displayElem = document.querySelector("p");
const codeElem = document.querySelector("output");
Next, we define a function called setEdgeTrim()
. This applies a text-box
value to the paragraph based on the values of the <select>
elements, and also prints the applied declarations to the output (both the longhand and shorthand equivalents):
function setEdgeTrim() {
const textBoxTrimValue = boxTrimSelect.value;
const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;
codeElem.innerHTML = `
<span><code>text-box-trim: ${textBoxTrimValue}</code></span>
<br>
<span><code>text-box-edge: ${textBoxEdgeValue}</code></span>
<br><br>
<span>Shorthand equivalent:</span>
<br><br>
<span><code>text-box: ${textBoxTrimValue} ${textBoxEdgeValue}</code></span>
`;
}
In the last part of the JavaScript we run the setEdgeTrim()
function once to set an initial state for the UI. We then then apply change
event listeners to all of the <select>
elements (via addEventListener
) so that setEdgeTrim()
is run whenever one of the <select>
values changes to update the UI accordingly:
setEdgeTrim();
boxTrimSelect.addEventListener("change", setEdgeTrim);
trimOverSelect.addEventListener("change", setEdgeTrim);
trimUnderSelect.addEventListener("change", setEdgeTrim);
Result
The output is as follows:
text-box-trim
is initially set to trim-both
, meaning that the over and under edges of the paragraph are trimmed. text-box-edge
is initially set to cap alphabetic
, meaning that the text is trimmed flush with the top of capital letters at the start edge, and flush with the baseline at the end edge.
Try changing the <select>
values to see the effect they have on the display text.
Specifications
Specification |
---|
CSS Inline Layout Module Level 3 # text-box-trim |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-box-trim | ||||||||||||
none | ||||||||||||
trim-both | ||||||||||||
trim-end | ||||||||||||
trim-start |
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
,text-box-edge
- CSS inline layout module
- CSS text-box-trim on developer.chrome.com (2025)