Limited support Limited browser support. Check compatibility before use.

text-box

The text-box CSS property is a shorthand that corresponds to the text-box-trim and text-box-edge properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-box-trim
133
133
149
18.2
133
18.2
text-box

The text-box CSS property is a shorthand that corresponds to the text-box-trim and text-box-edge properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.
133
133
149
18.2
133
18.2
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
auto
133
133
149
18.2
133
18.2
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
CSS type
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
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 
/* Shorthand */
.precise {
  text-box: trim-both cap alphabetic;
}

/* Specific styling */
.button-text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Trim top only */
.heading {
  text-box: trim-start cap alphabetic;
}

Live demo

trim-both

text-box (trim/edge) Trim-both demo.

PreviewFullscreen

trim-start

text-box (trim/edge) Trim-start demo.

PreviewFullscreen

Without Trimming

text-box (trim/edge) Without trimming demo.

PreviewFullscreen

Use cases

  • Using text-box

    The text-box CSS property is a shorthand that corresponds to the text-box-trim and text-box-edge properties, which together specify the amount of space to trim from the block-start edge and block-end edge of a text element's block container.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links