Browser engineer at @igalia, currently working on layout on Chromium (Google Chrome), as well as on interoperability between browsers and server-side JS runtimes as part of the WinterCG project.
I'm also:
- A math/physics/linguistics geek.
- Linux guy.
- Atheist / secular humanist.
- G(r)ay asexual, as well as aromantic.
- Non-binary.
I'm improving the way line clamping works in Chrome and in the specs. The existing -webkit-line-clamp property is a mess, because it will only do something if you have other properties (which are legacy versions of flexbox properties), and we can't fix that because of web compat. But we can add a new line-clamp property without those issues!
But right now I'm dealing with what should happen if you have both properties set on the same element:
I'm improving the way line clamping works in Chrome and in the specs. The existing -webkit-line-clamp property is a mess, because it will only do something if you have other properties (which are legacy versions of flexbox properties), and we can't fix that because of web compat. But we can add a new line-clamp property without those issues!
@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.
```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here
```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.
```
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 3;
```
Clamps to 3 lines because the unprefixed version wins.
@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.
```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here
```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.
@andreu I know most people vote for the “clamp 3 lines” option, but it’s the basic principle of CSS cascade we’re about to break here. I’d rather rename the property than introduce this special case. Have you considered renaming it to something else since it’s more of a new property than the unprefixed version of an old one?
@andreu I voted for 3 because you just explained that the prefixed version will work only with the old flexbox properties. This voting looks more like a test for IQ than a test of our CSS knowledge unfortunately. And of course we all are smart, ya 😂
Gregory's Server
@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.
```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here
```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.
```
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 3;
```
Clamps to 3 lines because the unprefixed version wins.
@andreu
Due line-clamp and -webkit-line-clamp are not 1:1 properties, I'd treat them differently.
```
display: block;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 3 lines becasue line-clamp is not valid here
```
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 4;
```
Clamps to 4 lines because the prefixed version works and override the previous one.
@andreu I know most people vote for the “clamp 3 lines” option, but it’s the basic principle of CSS cascade we’re about to break here. I’d rather rename the property than introduce this special case. Have you considered renaming it to something else since it’s more of a new property than the unprefixed version of an old one?
@andreu I voted for 3 because you just explained that the prefixed version will work only with the old flexbox properties. This voting looks more like a test for IQ than a test of our CSS knowledge unfortunately. And of course we all are smart, ya 😂