Ориентирование в стиле webkit box исчезает из стиля

Question

В моем приложении Angular (у меня версия 4.3.1) я добавляю многоточие CSS после нескольких строк.
Для этого я использую следующий код CSS в Sass.

.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

Следующая работа для меня.

.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

Для SCSS:

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

Answer 5

Ни один из ответов не помог мне.

Моим решением было поставить -webkit-box-orient: verticalкак встроенный стиль, а все остальное как класс. Не элегантно, но работает.