Email or username:

Password:

Forgot your password?
1 post total
Andreu Botella :verified_enby:

Hey! CSS developers! I want to hear from you.

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:

display: block;
line-clamp: 3;
-webkit-line-clamp: 4;

(Note that if we remove line-clamp: 3, this wouldn't clamp, because display: block prevents -webkit-line-clamp from working.)

So what do you think should happen?

#css #CSSWG

Hey! CSS developers! I want to hear from you.

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!

Anonymous poll

Poll

Clamps to 3 lines
35
85.4%
Clamps to 4 lines
4
9.8%
Doesn't clamp
2
4.9%
41 people voted.
Voting ended 30 October at 8:09.
Show previous comments
O Óscar

@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.

Vadim Makeev

@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?

Fogrew :verified: 🖖🏽

@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 😂

Go Up