cssangularionic-frameworksassellipsis

webkit box orient styling disappears from styling

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.

Solution

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