web-dev-qa-db-ja.com

webkitボックスのオリエントスタイリングがスタイリングから消える

私のAngular app（私はバージョン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アプリで発生するようです。

cssangularionic-frameworksassellipsis
20
Paul van den Dool

ラッピング-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;
}
55
Paul van den Dool

以前に提示されたのと同様の解決策ですが、それがあなたのものである場合は1行少なくなります：

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

次の仕事は私にとって。

.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

答えはどれもうまくいきませんでした。

私の解決策は-webkit-box-orient: verticalインラインスタイルとして、残りはクラスとして。エレガントではありませんが、機能します。

0
jonask