webkit box orient styling disappears from styling

Paul van den Dool picture Paul van den Dool · Sep 11, 2017 · Viewed 10.5k times · Source

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.

Answer

Paul van den Dool picture Paul van den Dool · Sep 11, 2017

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