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