webkit盒东方造型从造型中消失

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在下面的autoprefixer代码似乎解决了这个问题.

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

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

对于 SCSS：

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

Answer 4

以下为我工作。

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

}

Answer 5

没有一个答案对我有用。

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