Angular adding CSS in devtolls works, but not in the code

Question

I need to make elipsis max length on multiline in CSS. So I just:

.body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

But it doesnt work, however if I set this via Chrome devtools on the selected element (element.style {} ), it works.

Doesnt work:

enter image description here

Works:

enter image description here

As you can see, styles are added in both cases (only for some reason -webkit-box-orient: vertical; is not added in first one).

Any help?

please add relevant code

לבני מלכה
– לבני מלכה

2019-04-04 09:06:39 +00:00
Commented Apr 4, 2019 at 9:06 — לבני מלכה
– לבני מלכה, Commented Apr 4, 2019 at 9:06
Are your styles scoped? Where do you add this css?

Orlandster
– Orlandster

2019-04-04 09:06:41 +00:00
Commented Apr 4, 2019 at 9:06 — Orlandster
– Orlandster, Commented Apr 4, 2019 at 9:06

Techie_T · Accepted Answer · 2019-04-04 09:38:30Z

1

Autoprefixer removes outdated prefixes that are no longer needed. Try using this to ignore the removal of style.

.body {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
   /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

answered Apr 4, 2019 at 9:38

Techie_T

4353 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Julius Dzidzevičius Over a year ago

Well that is interesting. Now styles are applied and it works well. Could you please elaborate a bit more if possible? Is this can be considered as a good approach to my goal?

Techie_T Over a year ago

AutoPrefixer parse your CSS and add vendor prefixes to CSS rules. And as I mentioned this rule is already removed so it will not parsed through it.

Techie_T Over a year ago

Here, before this css statement comes we are making autoprefixer ignore or off. so that this style can render

Julius Dzidzevičius Over a year ago

Oh, just found that line-clamp support is not enough - f.ex. Firefox doesnt support it... Will look other solutions. But your answer is great! Thanks!

Techie_T Over a year ago

Yeah, It won't work in other browsers as line-clamp is only works with webkit. Let me know the solution if you get for all the browsers for line clamp

Collectives™ on Stack Overflow

Angular adding CSS in devtolls works, but not in the code

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related