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.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient is an old syntax version and requires flexbox — Paulie_D, Sep 11 '17 at 10:33
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. — Paul van den Dool, Sep 15 '17 at 07:18
Why are there two `display` rules? Isn't enough to use `display: -webkit-box` only? — smartmouse, May 23 '19 at 10:12
`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`. — Paul van den Dool, Jun 05 '19 at 14:10

score 85 · Accepted Answer · edited Jul 05 '20 at 04:07

85

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 */
}

edited Jul 05 '20 at 04:07

Always Helping

14,316
4
13
29

answered Sep 11 '17 at 09:55

Paul van den Dool

3,020
3
20
44

2

The quoted pieces of code around -webkit-box-orient are different. And they seem to make all the difference. – Paul van den Dool Sep 15 '17 at 07:16
1

This also resolves the exact same problem I was having in a React app built using create-react-app – Andy Neale Aug 16 '18 at 07:17
1

You deserve a bit of my pay ! – Michael De Keyser Mar 13 '19 at 15:24
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`? – smartmouse May 23 '19 at 10:12
1

And... what the hell is that `autoprefixer` comment? O_o – smartmouse May 23 '19 at 10:16
1

@smartmouse OP seems to about ionic/angular app.. ionic v2/3 uses [autoprefixer](https://github.com/postcss/autoprefixer#readme) in the build process – Suraj Rao May 23 '19 at 10:21
Yes, I see, it works in my case as well because I'm developing an Angular app. Thanks. – smartmouse May 24 '19 at 08:18
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! – FabioStein Jul 04 '20 at 18:26
So, this is an autoprefixer bug? – Herbertusz Oct 14 '20 at 07:58

score 28 · Answer 2 · answered Aug 22 '18 at 19:10

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;
}

score 10 · Answer 3 · answered Mar 11 '19 at 06:55

10

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;

}

answered Mar 11 '19 at 06:55

Alan-Wen

109
1
3

as per documentation second rule will get ignored - https://github.com/postcss/autoprefixer#control-comments – godblessstrawberry Jun 16 '21 at 18:22
They docs linked above have this listed as how not to use these comments: `/* How not to use block level control comments */` – Davidicus Jul 28 '21 at 15:06

score 6 · Answer 4 · answered Dec 03 '20 at 08:45

6

For SCSS:

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

answered Dec 03 '20 at 08:45

rolznz

779
9
16

The `!` was not necessary for me using scss. – Davidicus Jul 28 '21 at 15:05
THIS! Took me some time to figure out that comment "!" to work. – Jiro Matchonson Jul 17 '23 at 16:30

score 4 · Answer 5 · answered Sep 19 '19 at 11:23

4

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.

answered Sep 19 '19 at 11:23

jonask

679
2
6
21

webkit box orient styling disappears from styling

5 Answers5