DEV Community

Cover image for text-box-trim — The CSS Property Most Developers Don’t Know Yet
Pawar Shivam
Pawar Shivam

Posted on

text-box-trim — The CSS Property Most Developers Don’t Know Yet

#webdev #css #frontend #ui

=> Why Text Never Looks Perfectly Centered

You center text using:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

But still…

👉 text looks slightly off
👉 not visually centered

=> The Hidden Problem

Fonts have built-in spacing:

  • extra space above (ascenders)
  • extra space below (descenders)

So even when centered…

👉 it doesn’t look centered

=> The Modern CSS Solution 

.text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
Enter fullscreen mode Exit fullscreen mode

=> What This Actually Does

  • removes extra space above and below text
  • aligns text based on font metrics
  • creates pixel-perfect typography

=> Why This Is Powerful

Now you can:

👉 truly center text
👉 align text inside buttons
👉 fix UI inconsistencies

=> Real UI Example

Buttons often look off:

.button {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Even then…

👉 text feels slightly higher or lower

With trim:

👉 perfectly balanced

=> Browser Support Warning

This is an experimental feature.

Not supported everywhere yet.

=> Safe Approach

Use fallback:

.text {
  line-height: 1;
}
Enter fullscreen mode Exit fullscreen mode

Then enhance with:

.text {
  text-box-trim: trim-both;
}
Enter fullscreen mode Exit fullscreen mode

=> What Developers Often Miss

The issue is not alignment.

It’s font metrics.

=> Real UI Tip

If your design looks “almost perfect” but not quite:

👉 it’s probably text spacing

=> What Do You Think?

Do you think text-box-trim will become a standard for modern UI design?

Top comments (0)