web-dev-qa-db-fra.com

le style orienté de la boîte Webkit disparaît du style

Dans mon Angular app (je suis sur la version 4.3.1), j'ajoute des points de suspension CSS après plusieurs lignes.
Pour cela, j'utilise le code CSS suivant dans Sass.

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

Pour une raison quelconque, la ligne orientée boîte est simplement supprimée du style par le transpile, ce qui empêche les ellipses de fonctionner. Cela semble se produire dans les applications Angular et Ionic.

cssangularionic-frameworksassellipsis
20
Paul van den Dool

Emballage -webkit-box-orient dans le code de préfixe automatique suivant semble résoudre le problème.

.Ellipsis {
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: Ellipsis;
}
55
Paul van den Dool

Solution similaire à celle présentée précédemment, mais une ligne de moins si c'est votre truc:

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

Le travail suivant pour moi.

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

}

5
Alan-Wen

Aucune des réponses n'a fonctionné pour moi.

Ma solution a été de mettre le -webkit-box-orient: vertical comme style en ligne et le reste comme une classe. Pas élégant, mais ça marche.

0
jonask