Unprefixed `line-clamp`

[BenjaminAster]

trafficstars

Description

The line-clamp CSS property still needs a -webkit- prefix and some additional non-standard properties (display: -webkit-box and -webkit-box-orient: vertical) to be set in Chromium, WebKit and Firefox. Chromium is currently working on implementing the unprefixed property. Implementing this new standardized property, which differs significantly from the old non-standard -webkit-line-clamp property, likely needs a lot of work from an implementation standpoint.

---

This issue is one of seven issues regarding unprefixing CSS properties/values, originally all in #702 (as per https://github.com/web-platform-tests/interop/issues/702#issuecomment-2358173009). The aim is to group the properties together into multiple (but not seven) focus areas.

Specification

https://drafts.csswg.org/css-overflow-4/#line-clamp

Additional Signals

No response

[gsnedders]

See also #16 and discussion there from prior years.

[bfgeek]

Note the new collapse variant specification is here: https://github.com/w3c/csswg-drafts/pull/10816

[bfgeek]

If this goes through it should only be for line-clamp and not the individual sub-properties yet (max-lines, continue, etc).

[jabcreations]

It's called Blink, not Chromium; Chromium is a browser, not a rendering engine.

#775

The line-clamp property (sans prefixes) should not be supported unless anything it relies on also is cleaned up and does not require prefixes. Anyone using CSS.supports() would end up getting confused. I clarified the details when I posted my thread.

[ccpandhare]

We (@rich-hansen, @ccpandhare) were planning to submit this exact proposal but found yours. Adding our "Additional Signals" section below:

1. What interop tests if any this affects:
   • https://github.com/web-platform-tests/wpt/tree/ec979384f0340b8d18c3512f02f42b65bd5f456c/css/css-overflow/line-clamp
2. Site breakage and workaround
   • No breakage as we currently polyfill, but as a result we have code size increase and small parse time and runtime perf regressions.
3. Size and current state of the feature
   • Size: Not sure
   • Current state: Works with vendor prefixes, with slightly different implementations across browsers
4. Browser bug trackers:
   • Moz: https://bugzilla.mozilla.org/show_bug.cgi?id=1540681
   • WebKit: https://bugs.webkit.org/show_bug.cgi?id=206748
5. Stack Overflow/blog posts referring to this
   • StackOverflow [1] (48k views, 7 years old)
   • StackOverflow [2] (1k views, 3 years old)
   • StackOverflow [3] (13k views, 5 years old)

[BenjaminAster]

@jabcreations

It's called Blink, not Chromium; Chromium is a browser, not a rendering engine.

I am very well aware of the difference between Chromium and Blink. Blink is a part of the Chromium project and inseparably tied to it. If you want to look at Blink's source code, you'll land in the Chromium repository. When creating Interop issues, it is important that people who are not deeply familiar with Chromium's internal structure also understand what I'm talking about. Chromium is the de facto umbrella term that also includes Blink and that—contrary to "Blink"—is very well known.

The line-clamp property (sans prefixes) should not be supported unless anything it relies on also is cleaned up and does not require prefixes.

Yes, this is what this issue is about. "Unprefixing line-clamp" refers to much more than just to change the property name in Blink's source code from -webkit-line-clamp to line-clamp. It means to implement an entirely new thing that doesn't depend on any other -webkit- stuff (see the linked specification).

---

@ccpandhare Thank you! I added these to the original comment.

[andreubotella]

1. What interop tests if any this affects:

   • https://github.com/web-platform-tests/wpt/tree/ec979384f0340b8d18c3512f02f42b65bd5f456c/css/css-overflow/line-clamp

There are some additional tests for the parsing of line-clamp-related properties in https://github.com/web-platform-tests/wpt/tree/ec979384f0340b8d18c3512f02f42b65bd5f456c/css/css-overflow/parsing.

There are also some tests in other parts of css/ that test the interaction of (-webkit-)line-clamp with other properties. We don't need to include all of them, but I list them here for completeness:

• css/css-flexbox/alignment/flex-align-baseline-line-clamp-{001,002,003}.tentative.html
• css/css-grid/alignment/grid-align-baseline-line-clamp-{001,002,003}.tentative.html
• css/css-inline/baseline-source/baseline-source-{first,last}-{001,002,003}.html (includes -webkit-line-clamp as one of the multiple tests)
• css/css-inline/text-box-trim:
  • css/css-inline/text-box-trim/text-box-trim-line-clamp-001.html
  • css/css-inline/text-box-trim/text-box-trim-line-clamp-auto-{001,002}.html.
  • I think these should be included because the auto tests check for a non-trivial interaction that's not necessarily clear from the specs.
• css-text/white-space:
  • css-text/white-space/text-wrap-balance-005.html
  • css-text/white-space/text-wrap-balance-line-clamp-001.html

[stubbornella]

If this goes through it should only be for line-clamp and not the individual sub-properties yet (max-lines, continue, etc).

Why? Do they need standards work?

[wpt-interop]

Thank you for proposing Unprefixed line-clamp for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.

[jabcreations]

Closed as completed when it clearly wasn't? So everyone here will have to double their time spent to advocate for this again in ~10 months time?

[foolip]

@jabcreations I've been closing issues using the default action, but certainly line-clamp isn't "completed" on the web platform. As one of the last remaining CSS properties that requires a prefix, it keeps popping up on my radar, going back to at least https://github.com/web-platform-tests/interop/issues/16. I think it will stay on the radar of the Interop team, but it does help to see that there's a lot of demand for it.

One thing that came up in the planning process was https://github.com/w3c/csswg-drafts/pull/10816, which is still in review. I will ask if there are other spec or test issues that relate to this proposal.

Another thing that happened not long ago is that Safari 18.2 shipped support for unprefixed line-clamp, which I found by following clues from https://webstatus.dev/features/line-clamp and testing to confirm. Surprisingly it isn't mentioned in the release notes. Testing this implementation and filing bugs would also be useful, I think.

[andreubotella]

There is also a WIP implementation in Chrome. ~~It's not under the experimental web platform features flag yet, but you can test it with the --enable-blink-features=CSSLineClamp command-line flag.~~

Edit: My bad, it is enabled with experimental web platform features, and has been for months!