webkit box orient样式从样式中消失

Question

在我的 Angular 应用程序中（我的版本是 4.3.1），我在多行之后添加了一个 CSS 省略号。
为此，我在 Sass.

中使用以下 css 代码

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

出于某种原因，面向框的行只是被转换程序从样式中删除，导致省略号不起作用。这似乎发生在 Angular 和 Ionic 应用程序中。

Answer 1

在以下自动前缀代码中包装 -webkit-box-orient 似乎可以解决问题。

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

Answer 2

与之前介绍的解决方案类似，但如果您喜欢的话，可以少一行：

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

Answer 3

以下工作适合我。

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

}

Answer 4

None 个答案对我有用。

我的解决方案是将 -webkit-box-orient: vertical 作为内联样式，其余的作为 class。不优雅，但它有效。

Answer 5

对于 SCSS：

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

webkit box orient样式从样式中消失

webkit box orient styling disappears from styling

css

angular

ionic-framework

sass

ellipsis