line-clamp proper association to a MODERN CSS property instead of -webkit-box from 2000s

[jabcreations]

Description

The CSS line-clamp property is exceptionally valuable for mobile devices when I need to prevent text from getting out of control. Unfortunately it's an absolute mess. Who still goes out of their way to support -webkit-box for anything? As far as I can determine there are no other display values that line-clamp will work with.

I propose either updating display: flex to support line-clamp or to have a new value. Unfortunately I haven't been able to be involved in any of those decisions though I am predominately using flex, block, inline-block and inline except for tables in the vast majority of cases.

• I recommend at least two years to still support -webkit-box after a proper permanent solution is found
• I recommend the permanent solution not require a CSS prefix since this feature seems stable as-is.
• I recommend updated documentation also addressing the -webkit-box-orient property and what property and values of that property should replace it.

Rationale

• Ancient -webkit-box from the first out of the now three (?) iterations for flexbox.
• Messy: requires a CSS prefix for something that has been around for years.
• Unstable: suggests we'll be stuck with CSS prefixes for eternity.

Investigation Roadmap

The primary issue is the -webkit-box value for the display property and the -webkit-box-orient property being required for line-clamp.

Secondly the feature seems stable and I think a rendering engine update should provide the non-prefixed property explicitly only when it can be used without old/required properties and values with their CSS prefixes. That would ensure that feature detection was not bugged/worthless. It is better to release later and stable than to rush to the market in a mess.

[mrego]

This is related to #725

BTW, Chromium has an ongoing implementation for line-clamp: https://issues.chromium.org/issues/40336192

[jabcreations]

Blink, that is the name of that rendering engine. Thank you Mr. Ego the links.

[wpt-interop]

Thank you for proposing line-clamp proper association to a MODERN CSS property instead of -webkit-box from 2000s 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.