Limited supportUse with care and confirm browser support before shipping it to all users.
Typography Limited support

text-box

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. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Typography

Overview

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. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-box
133
133
149
18.2
133
18.2
Other
css.properties.text-box-edge

The text-box-edge CSS property specifies an amount of space to trim from a text element's block container.
133
133
149
18.2
133
18.2
CSS property
auto
133
133
149
18.2
133
18.2
Other
css.properties.text-box-trim

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.
133
133
149
18.2
133
18.2
CSS property
none
133
133
149
18.2
133
18.2
trim-both
133
133
149
18.2
133
18.2
trim-end
133
133
149
18.2
133
18.2
trim-start
133
133
149
18.2
133
18.2
normal
133
133
149
18.2
133
18.2
Other
css.types.text-edge

The enumerated data type defines keywords that specify font metrics representing specific regions on a font's block-start edge and block-end edge. Each keyword specifies a position of a font's over and/or under edge.
133
133
149
18.2
133
18.2
CSS type
alphabetic
133
133
149
18.2
133
18.2
cap
133
133
149
18.2
133
18.2
ex
133
133
149
18.2
133
18.2
text
133
133
149
18.2
133
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Experimental
  • Requires an experimental browser flag to be enabled
Implementation note
  • Rendering not implemented (only parsing and serialization).

Syntax

CSS 
/* text-box */
/* See MDN Web Docs for details */

Use cases

  • Refine text rhythm

    Use text-box to make long-form reading or dense interface copy easier to scan and understand.

  • Support language nuances

    Apply text-box when different writing systems or typographic conventions need more deliberate control.

Cautions

  • Test text-box in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.

Related links

Powered by web-features