Get Clamped: Unwinding Some Difficult CSS History

Author Information

Posted on 05/22/2026

Get Clamped: Unwinding Some Difficult CSS History

Sometimes features take a long and winding road on the way to a good solution. We could use your help testing improvements for something that's been somehow developing for about a quarter of a century...

Back in the mid-2000s there was a great debate on where the web was going. The web itself had really exploded and people were really starting to use it as an application delivery platform. Most of the world, including W3C members, seemed to kind of assume that we would get a web for apps instead of documents, and there were several pieces being developed for this. Mozilla had XUL, Microsoft had XAML, Adobe had Flex, even Oracle wound up with this JFX thing. Back then, anyone using these would have definitely noticed that the layout models were different from the web which was then still all abspos and floats. David Baron wrote about this in 2006.

This all brewed for a while until CSS picked up a similar concept. As often happens, they were experimenting with implementations before anyone submitted a public draft. David Baron wrote to the www-style mailing list in June 2008

Much of the specification is implemented in both Gecko and Webkit (with prefixes), and this implementation forms the basis of the formatting model of XUL

This created -webkit-box which was an earlier take on Flexbox.

This is not flexbox's story.

It is instead the strange story of the origins of line clamping, if you can believe it! That's because given this internal ability, Apple added some support for line clamping which used it. Internally, WebKit supported -apple-line-clamp (and later -khtml-line-clamp). This became -webkit-line-clamp and it accidentally escaped the lab and made it into the public releases of Safari.

Given it, one could suddenly have a few lines that would show ellipsis if rendering went beyond that.

.things {<br>overflow: hidden;<br>display: -webkit-box;<br>-webkit-line-clamp: 2;<br>-webkit-box-orient: vertical;<br>As far as I can tell, it was never actually publicized by Apple. Despite this, it was useful enough that as people learned about it, they shared (as we do) and eventually so many people used it that it became something of a de facto standard. This is before the WebKit/Blink fork, and so it wound up in Chrome and later in other chromium flavored browsers, all with the -webkit- prefixes. In the Project Spartan/EdgeHTML era Microsoft found that they needed to support it for compatibility and added support for the -webkit- prefix in April 2018. Firefox added support in July 2019. The fact that it was flex related at all changed in most browsers a while back, but this weird winding road led through lot of pains.. Chris Coyier wrote a piece about the state of it in 2013. A few years later, in 2016 Nils Rasmusson wrote CSS Line-Clamp — The Good, the Bad and the Straight-up Broken.

Today, according to chromestatus, it's in over 40% of page loads, and on over 30% of pages in the HTTPArchive crawl — and popularity is still growing.

Interoperability and Correction

Despite all of that, lots of it was not consistent or interoperable.

Lots of it didn't even really make sense internally.

It wasn't well designed.

So, there has been a real effort to create a good solution here for the past few years. Igalia (primarily my colleague Andreu Botella) has been working on it, and started with an explainer that is still pretty good and includes images and lots more info. It is now part of CSS Overflow Level 4, and there is an updated implementation in Chromium — you can try it today by enabling experimental web platform features at chrome://flags/#enable-experimental-web-platform-features. If you flip that flag, you're using it!

Guess what it lets you do now....

.thingr {<br>line-clamp: 3;

So cool that Millie Bobby Brown's mind is blown... (via GIPHY)

It's so simple by default. So good, right?

You can also use the auto value to do this based on some kind of measured value — a max-height, for example:

.thingr {<br>max-height: 400px;<br>line-clamp: auto;

Great, how can I help?

Excellent, I'm glad you asked!

Well, for one you can try out the new unprefixed line-clamp, it's way nicer. You can read about it in the explainer.

Ask questions (you can send them to Andreu on bluesky or mastodon), or report issues if you find them.

Maybe say "thanks" to Bloomberg Tech for funding the work!

But more importantly: This work also involved reconciling as much as we can in order to share code and tests and standard, well-defined behavior for display: -webkit-line-clamp and friends. We believe that all of these decisions are good, but we need some time for research and feedback given the scale of existing deployments. Remember — this thing is on over 40% of page loads. That means even a small percentage of regressions is a lot of real pages and real users. Check your sites, let us know if you...