Css webkit长方体方向样式将从样式中消失

在我的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应用程序中。

包装

-webkit box orient

下面的autoprefixer代码似乎解决了这个问题

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

---

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

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

---

以下是我的工作

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

---

}没有一个答案对我有用

我的解决方案是将

-webkit-box-orient:vertical

作为内联样式，其余的作为一个类。虽然不雅致，但很有效。

对于SCS：

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

---

是一个旧的语法版本，需要flexboxI，我知道它已被弃用，但在段落的第n行添加省略号时仍然有效。在我的例子中，使用它是安全的，因为所有用户都使用相同的浏览器。为什么有两个

显示规则？仅使用
display:-webkit-box
是不够的？
display:block
是一种后备方法。默认情况下，
div
具有
display:block
，但如果要使用span，则默认情况下它具有
display:inline block
。在本例中，我想我希望将
显示设置为
块
。这也解决了我在使用create-React-app构建的React应用程序中遇到的问题。你应该得到一点我的报酬！为什么有两个显示规则？仅使用display:
-webkit-box
还不够吗？此外，甚至删除
文本溢出：省略号
？和。。。那该死的
autoprefixer
评论是什么？O_oas per documentation second规则将被忽略-