Unprefixed `line-clamp`

[BenjaminAster]

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

These are mostly copy-pasted from @ccpandhare's comment. Thank you Chinmay!

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
• Chromium: e.g. https://issues.chromium.org/issues/40336192 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)

[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