Summary: -webkit-line-clamp is a feature implemented in WebKit, Blink, and Edge that allows authors to control the height of a block so that it contains at most the specified number of lines, and if there are excess lines, an ellipsis is inserted in the last non-excess line.
http://dropshado.ws/post/1015351370/webkit-line-clamp Lack of support for -webkit-line-clamp is a common cause of Web compatibility problems in Gecko, particularly on mobile sites. Unfortunately, this feature is an odd duck in the existing implementations, since: 1. It only has an effect in `display: -webkit-box` and `display: -webkit-inline-box` elements. 2. Any excess lines are still displayed, and overflow the box. Authors must (and do) use `overflow: hidden` to hide them. 3. -webkit-line-clamp is implemented as an additional constraint on the intrinsic size of the element (like a max-block-size property), and so usually only has an effect if `-webkit-box-orient: vertical` is also specified. The CSS Working Group is attempting to define a standards-based solution that is sufficiently compatible with existing content. As currently written, I think the standard line-clamp property (if we also support it with the -webkit prefix) should be compatible with the content we know we are currently broken on, although there is some risk of breakage due to the property applying to more elements. This solution would need a more complex solution than WebKit/Blink currently have, however. (Rather than just adjusting an input to the intrinsic sizing of the element, it would require fragmenting the excess lines away and suppressing them, something we don't have the concept for internally at the moment.) The current spec does capture the use case of just limiting the number of lines in an element more sensibly than the existing implementations, though. My current plan is to implement something closer to the existing implementations since (a) it is simpler, and (b) there is less risk of compatibility problems introduced by -webkit-line-clamp applying to more elements than in WebKit/Blink. I will then provide feedback on the spec to support this behavior, or if that's not possible, get something added to the Compat spec. Implementing the full fragmentation based line-clamp solution can be a followup task at some point. Note that there seems to be some desire in Blink to replace -webkit-line-clamp's behavior with something that lives in a spec (https://bugs.chromium.org/p/chromium/issues/detail?id=305376) but I am doubtful that support for it can be removed entirely. Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=866102 Link to standard: https://drafts.csswg.org/css-overflow-3/#line-clamp Platform coverage: everywhere Estimated or target release: Firefox 68 Preference behind which this will be implemented: layout.css.webkit-line-clamp.enabled Is this feature enabled by default in sandboxed iframes? yes DevTools bug: as this is being implemented only for compatibility I don't think it's appropriate to build a DevTools feature for it Do other browser engines implement this? yes (WebKit, Blink, and Edge) web-platform-tests: none exist (and I don't plan to write WPTs until I manage to get the spec changes made) Is this feature restricted to secure contexts? no (other engines don't restrict it) _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform