webkit box orient styling disappears from styling

Question

In my Angular app (I'm on version 4.3.1) I'm adding a CSS ellipsis after multiple lines.
For this, I use the following css code in Sass.

.ellipsis {
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

For some reason, the box-orient line simply gets removed from the styling by the transpile, causing the ellipsis to not work. This seems to happen in Angular and Ionic apps.

Chockfull

developer.mozilla.org/en-US/docs/Web/CSS/box-orient is an old syntax version and requires flexbox – Pigeonhole

I know it's deprecated, but it still works when adding ellipsis on the nth line of a paragraph. And in my case, it's safe to use because all users use the same browser. – Chockfull

Why are there two display rules? Isn't enough to use display: -webkit-box only? – Taxiplane

display: block is a fallback. A div has display:block by default, but if you were to use a span it would have display: inline-block by default. In this case I think I wanted to have the display set to block. – Chockfull

Answer 1

Wrapping -webkit-box-orient in the following autoprefixer code seems to solve the issue.

.ellipsis {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    /* autoprefixer: off */
}

Chockfull

The quoted pieces of code around -webkit-box-orient are different. And they seem to make all the difference. – Chockfull

This also resolves the exact same problem I was having in a React app built using create-react-app – Athalla

You deserve a bit of my pay ! – Geist

Why are there two display rules? Isn't enough to use display: -webkit-box only? In addition, doesn't it work even removing text-overflow: ellipsis? – Taxiplane

And... what the hell is that autoprefixer comment? O_o – Taxiplane

@Taxiplane OP seems to about ionic/angular app.. ionic v2/3 uses autoprefixer in the build process – Pallmall

Yes, I see, it works in my case as well because I'm developing an Angular app. Thanks. – Taxiplane

I received this warning: Warning (20:3) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules. just one autoprefixer can be used per block! – Monostrophe

So, this is an autoprefixer bug? – Mylan

Answer 2

Similar solution as was previously presented, but one less line if that's your thing:

.ellipsis {
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

Mcewen

Answer 3

The following work for me.

.ellipsis {
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;

}

Extortioner

as per documentation second rule will get ignored - github.com/postcss/autoprefixer#control-comments – Strident

They docs linked above have this listed as how not to use these comments: /* How not to use block level control comments */ – Rodl

Answer 4

For SCSS:

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

Jordain

The ! was not necessary for me using scss. – Rodl

THIS! Took me some time to figure out that comment "!" to work. – Kaleidoscope

Answer 5

None of the answers worked for me.

My solution was to put the -webkit-box-orient: vertical as inline-styling and the rest as a class. Not elegant, but it works.

Assimilate

This is the only solution that worked for me (using scss) thanks! – Preston