Support prefixing line-clamp

[jathak]

While the standard line-clamp property is not yet supported in any browsers, the prefixed -webkit-line-clamp is unusual in that it is supported in all modern browsers, including Firefox.

-webkit-line-clamp, unlike the standard line-clamp, also requires display: -webkit-box and -webkit-box-orient: vertical, so ideally Autoprefixer should add those properties as well.

Input

.example {
  line-clamp: 2;
}

Expected Output (for all current browsers)

.example {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

[ai]

Thanks for the links, they are very helpful for us.

Unfortunately, because of architectural limits (and project goal), we can’t insert display: -webkit-box and -webkit-box-orient: vertical (Autoprefixer adds simple prefix and convert syntaxes, but do not work with polyfills).

Imagine if the user will write CSS like this and got an unexpected result because they didn’t know how line-clamp is implemented inside:

.bad {
  line-clamp: 2;
  display: inline-block; /* this property will override display: -webkit-box and break the hack */
}

What do you think if the user should write (and Autoprefixer will insert only -webkit-line-clamp: 2)?

.example {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2; /* Autoprefixer will insert -webkit-line-clamp: 2 above */
}

[ai]

Do you want to save your name in the project history? It is not hard to add line-clamp support:

1. Add a feature to data/prefixes.js. You can use other features as an example (caniuse-lite file will use the same name as feat option from Can I Use URL).
2. Then you will need a “hack” to override prefixes to -webkit-. You can use appearance hack as an example.
3. Here is a place to load your hack.
4. Examples to write tests.

[lukewarlow]

Due to the above mentioned complex nature of the interop between line-clamp and -webkit-line-clamp this issue should probably wait until there's at least one implementation of the standard version to validate that the output is actually useful?

Tracking bugs for reference:

Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1540681
Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=305376