Angular-cli: -Webkit-Line-Clamp Not Working in Angular 6

[briantq]

I'm submitting a...

[ X ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

In Angular 5, I was able to use -webkit-line-clamp to limit text to 1 or 2 lines depending on the context. After upgrading to Angular 6, this stopped working. I reverted back to v5 and it worked again. The scss styling I am using is

    -webkit-line-clamp: 1;

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-box-orient: vertical;

Expected behavior

-webkit-line-clamp should continue to work after upgrading

Minimal reproduction of the problem with instructions

I created a project with Angular CLI for v5, added an element that wraps, then upgraded the project to Angular 6. The git project can be found here: https://github.com/briantq/ng-line-clamp I have two branches, v5 and v6. v5 is Angular 5 and when running 'ng serve' will render correctly. v6 is the upgrade to Angular 6 and when running 'ng serve', will not truncate.

What is the motivation / use case for changing the behavior?

For list views, we don't want to render full content, instead only a preview. Due to responsive design, we don't know how much text we need to render so rely on line-clamp. Preview renders way too much content and is no longer a manageable.

Environment

Angular version: 6.X.X


Browser:
- [ X ] Chrome (desktop) version 66
- [ X ] Chrome (Android) version 66
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ X ] Safari (iOS) version 11.3
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 8.9.4
- Platform:  Windows

Others:
Not that I can think of.  Just make sure to run npm update after switching branches.  

Please let me know if I can provide additional information that would be helpful. Thank you!

[briantq]

@ericmartinezr thanks for the suggestion and the link to the comment. I tried the setting in both the tsconfig.json and in the bootstrap module call but neither worked. Please let me know if you have other suggestions on things I can try.

[sergidt]

same bug there!!

[aalbericio]

Please, provide a workaround for this bug as soon as possible.

Those preserveWhiteSpaces settings didn't work for us.

When using line-clamp, -webkit-box-orient is removed from the component :(

Thank you in advance.

[filipesilva]

Angular CLI runs autoprefixer on styles, and it might be that that property is being removed.

There seems to be an issue about this on the old autoprefixer repository: https://github.com/ai/autoprefixer-core/issues/60

A few other issues mentioning the -webkit-line-clamp as well on the new one: https://github.com/postcss/autoprefixer/issues?q=is%3Aissue+clamp+is%3Aclosed

[clydin]

The option only works if the display property is set to -webkit-box. The vendor prefix is unneeded in modern browsers and is therefore removed by autoprefixer. This unfortunately causes -webkit-line-clamp (which is based on an outdated version of flexbox) to be ignored. Adding /* autoprefixer: ignore next */ to the line before display should prevent autoprefixer from modifying the property.

[hiepxanh]

@briantq
/* autoprefixer: ignore next */ -webkit-box-orient: vertical;

can you try this? I took it from here

[aalbericio]

It works like a charm!

Thanks for the quick reaction/response!

[hiepxanh]

thank you @aalbericio can we close that issue?

[briantq]

@clydin @hiepxanh thank you! That fixed it. Closing this issue

[IgorMinar]

This still seems to be an issue affecting users (in v6.1). I'm reopening this to reflect that.

Also see: https://github.com/angular/angular/issues/25854

[insanehong]

This still seems to be an issue(v6.0.9). same bug there!!

[alimemonzx]

@hiepxanh It works perfect. Thanks

[luisfwermann]

I'm using Angular 7.2 and had the same problem with this style... It not renders from SCSS to CSS...

[scarings]

same here, v7.2 -webkit-box-orient property is being removed

[saint1729]

@hiepxanh That worked like a charm. Thanks :)

[alan-agius4]

Hi all, as @clydin mentioned above this is working as expected.

The option only works if the display property is set to -webkit-box. The vendor prefix is unneeded in modern browsers and is therefore removed by autoprefixer. This unfortunately causes -webkit-line-clamp (which is based on an outdated version of flexbox) to be ignored. Adding /* autoprefixer: ignore next */ to the line before display should prevent autoprefixer from modifying the property.

Kindly see also: https://github.com/postcss/autoprefixer/issues/776

[n3nikita]

Same issue here.

Angular CLI: 7.1.4.
Angular 8.0

Fixed using /* autoprefixer: ignore next */. Thanks @hiepxanh

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}