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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 133 | 133 | 149 | 18.2 | 133 | 18.2 | |
| Other | ||||||
| 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 | ||||||
| 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 | ||||||
| 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 |
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
- This browser only partially implements this feature
- Requires an experimental browser flag to be enabled
- Rendering not implemented (only parsing and serialization).
Syntax
/* 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.