text-boxLimited availability

The text-box CSS property sets the spacing above and below text based on a font's typographic features. For example, text-box: trim-both ex alphabetic trims the top to the top of the letter x and the bottom to the bottom of most letters, without descenders.

Not yet supported in all major browsers — check the table and provide a fallback.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–132Not supported

133+Supportedsince Feb 4, 2025

Current: 155

Edge

12–132Not supported

133+Supportedsince Feb 6, 2025

Current: 154

Firefox

✕Not supportedup to 157

Current: 157

Safari

1–18.1Not supported

18.2+Supportedsince Dec 11, 2024

Current: 27

MobileChrome Android

18–132Not supported

133+Supportedsince Feb 4, 2025

Current: 155

Firefox Android

✕Not supportedup to 157

Current: 157

Safari iOS

1–18.1Not supported

18.2+Supportedsince Dec 11, 2024

Current: 27

How to use

Not supported in Firefox, Firefox Android. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: text-box.

Feature detection

CSS · check before using

@supports (text-box: initial) {
  /* styles that rely on text-box */
}

/* or in JavaScript */
if (CSS.supports("text-box", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org#leading-trim ↗

Usage share

caniuse.com/css-text-box-trim ↗

Sub-features

Support for each part of the feature (14). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
text-box	133	133	154	18.2	133	154	18.2
text-box-edge	133	133	154	18.2	133	154	18.2
text-box-edge.auto	133	133	154	18.2	133	154	18.2
text-box-trim	133	133	154	18.2	133	154	18.2
text-box-trim.none	133	133	154	18.2	133	154	18.2
text-box-trim.trim-both	133	133	154	18.2	133	154	18.2
text-box-trim.trim-end	133	133	154	18.2	133	154	18.2
text-box-trim.trim-start	133	133	154	18.2	133	154	18.2
text-box.normal	133	133	154	18.2	133	154	18.2
<text-edge>	133	133	✕	18.2	133	✕	18.2
<text-edge>.alphabetic	133	133	✕	18.2	133	✕	18.2
<text-edge>.cap	133	133	✕	18.2	133	✕	18.2
<text-edge>.ex	133	133	✕	18.2	133	✕	18.2
<text-edge>.text	133	133	✕	18.2	133	✕	18.2