Contact emails [email protected] Explainer https://github.com/Igalia/explainers/blob/main/css/line-clamp/README.md
Specification None. CSS Overflow Module Level 4 defines a version of the line-clamp property (https://drafts.csswg.org/css-overflow-4/#line-clamp), but that is a different version that we are proposing to prototype. See the explainer and the initial public proposal link for more details. Summary Allows clamping a block element to have at most a specific number of text lines, or to have as many lines as will fit in a certain height, showing an ellipsis at the end of the last line. This allows showing a small preview of a longer text, purely in CSS, in a simpler way than was previously possible. Blink component Blink>Layout <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ELayout> Motivation The functionality to clamp a block element to a number of lines and show an ellipsis at the end was previously already available through the -webkit-line-clamp property. This property, however, has a number of shortcomings. For instance, it relies on two other deprecated properties for it to work (display: -webkit-box and -webkit-box-orient: vertical), it requires overflow: hidden to be present so the clamped lines would be hidden, and it also only allows clamping based on a number of lines, not a height. The existing -webkit-line-clamp property seems to be a pain point for web developers (see this blog post <https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5>, for example), and a Chrome use counter shows that its uses without the other properties that are needed for it to work are at 3-4% <https://chromestatus.com/metrics/feature/timeline/popularity/3327>, showing significant misuse in the wild. Given this, it makes sense to implement a version without these fallbacks. Initial public proposal https://github.com/w3c/csswg-drafts/issues/7708 TAG review None TAG review status Pending Risks Interoperability and Compatibility This feature would change the behavior of the prefixed -webkit-line-clamp property to be based on the implementation of line-clamp. This prefixed property only works in the presence of the properties display: -webkit-box and -webkit-box-orient: vertical, and this will not change (as that change would be web incompatible). However, the requirement of needing overflow: hidden would be lifted. We plan to use this prototyping stage to make sure this does not break sites. Additionally, there is an ongoing discussion in the CSS Working Group on whether line-clamp should be implemented based on hiding lines from paint (“the collapse variant”), or based on fragmentation (“the discard variant”). The CSS Overflow Level 4 spec defines only the discard variant, and while Blink could implement it with LayoutNG, other browser engines will not be able to do so without a similar rearchitecturing effort. That is why we are planning to prototype the collapse variant. *Gecko*: Was positive on the collapse variant on the CSSWG issue proposing it (https://github.com/w3c/csswg-drafts/issues/7708). Other than that, no signal yet (https://github.com/mozilla/standards-positions/issues/984). *WebKit*: No signal yet ( https://github.com/WebKit/standards-positions/issues/316). *Web developers*: No signals *Other signals*: WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? None Debuggability None Is this feature fully tested by web-platform-tests <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> ? No Flag name on chrome://flags None Finch feature name None Non-finch justification None Requires code in //chrome? False Estimated milestones No milestones specified Link to entry on the Chrome Platform Status https://chromestatus.com/feature/4885575595458560 This intent message was generated by Chrome Platform Status <https://chromestatus.com/>. -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/330d100b-ac9a-49c7-b4e1-fb5f1cd3e35cn%40chromium.org.
