Interactive CSS feature explorer for text-box

Your browser doesn't support CSS text-box yet. See caniuse for current support.

Things to try:

  1. Visually inspecting how text-box-trim works across single line and multi-line text variants.
  2. Hovering over a variant, seeing the trim values used to achieve that effect.
  3. Changing the font.
  4. Trimming only one side of a text box.
  5. Review the syntax as you play.

Read a more full article on developer.chrome.com

text-box: trim-both cap alphabetic;

Hx Qj

角

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, omnis fuga suscipit enim sequi, harum consequatur, magni iste eum deleniti sit quae! Reprehenderit incidunt vero unde voluptates sapiente laborum repudiandae?

abcdefg
hijklmnop
qrstuv
wxyz

XOXO
OXOX

cap
alphabetic