-webkit-box quirks from -webkit-line-clamp (deprecated)

The following display properties will no longer work when -webkit-box and -webkit-box-clamp are combined: -webkit-box-flex, -webkit-box-ordinal-group, -webkit-box-align, -webkit-box-pack, -webkit-box-direction.

Motivation

Internally this is implemented a LayoutDeprecatedFlexibleBox. In M80 we transparently mapped the "flex usecase" of -webkit-box over to LayoutFlexibleBox. E.g. anything except for: .line-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } Is mapped over to flexbox implementation. We left the "line-clamp usecase" in LayoutDeprecatedFlexibleBox. This has suprising behaviour for web developers. 1) Other -webkit-box properties are supported, e.g: -webkit-box-flex -webkit-box-ordinal-group -webkit-box-align: -webkit-box-pack: -webkit-box-direction: We would stop these properties from having any affect in the "line-clamp usecase". NOTE these would still work for the "flex fallback" usecase. All these properties are below 0.0001% for M81 Beta. We would ship this removal first, as we believe that all these are extremely low (Google employees I can share internal UMA data) that these are all safe for removal. I've checked sites where they are using these properties with the "line-clamp usecase" and most have no effect. 2) As the "line-clamp usecase" was handled by a "flex" container, line-clamp was applied separately to all children, e.g. https://twitter.com/jaffathecake/status/1235869840226881536 https://jsbin.com/yerobes/edit?html,output In the above case web-developers expect that the line-clamp applies to the formatting context: https://twitter.com/bfgeek/status/1235982961331191813

Documentation

Specification

Editor's draft

Status in Chromium

Blink>Layout


Deprecated (tracking bug) in:

  • Chrome for desktop release 85
  • Chrome for Android release 85
  • Android WebView release 85

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • No signal
  • No signal
  • Positive

Owners

Comments

-webkit-line-clamp is a highly used feature which all modern browsers support. Is is used for truncating multiline text, e.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=7810 Unfortunately this feature when developed, was built on "display: -webkit-box" feature which proceeded "display: flex". Practically speaking there are two separate uses for "display: -webkit-box": 1) Multi-line clamping. 2) Flex fallback. This intent discusses removing the flex features from -w-l-c.

Search tags

line-clamp,

Last updated on 2020-10-25