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

在以下autoprefixer代码中包装-webkit-box-orient似乎解决了这个问题。

.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

以下对我有用的工作

.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

没有一个答案对我有用。

我的解决方案是将-webkit-box-orient: vertical用作内联样式，其余的作为类。不优雅，但是可以。

Answer 5

对于SCSS：

.*

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

5 个答案: