New Dec 27, 2024

CSS text-box

More Front-end Bloggers All from Frontend Masters Boost RSS Feed View CSS text-box on frontendmasters.com

Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say:

Now you can declare which font metric you want the browser to consider the edge of the text box when calculating layout

Jason Bradberry has a wonderfully deep article and showcases one of the big use cases (non jacked up button centering).

Like Robin Rendle says:

I’m always fighting the text-box when it comes to buttons in an interface and so hopefully this property fixes all that.

Adam Argyle says:

This line of code is about to be in every single stylesheet.

h1, p, button {
  text-box: trim-both cap alphabetic;
}
Scroll to top