CSS -webkit-box-orient: コンパイル後に垂直プロパティが失われる

1. 原因

要件は 2 行を表示することであり、余分なテキストは 3 つのドットに置き換えられるため、これらのあまり標準化されていない属性が使用されます。

ディスプレイ: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: 垂直;

後で、コードは適切に記述されていたが、ページ上に表示しても何も記述していないかのように反応しなかったことが分かりました。F12 で確認したところ、-webkit-box-orient: vertical; 属性が欠落しており、有効になっていないことがわかりました。この属性はスタイルに追加したばかりなので、コンパイル プロセスによってこの属性が失われたと結論付けました。

2. 解決策

インターネットで実行可能な解決策を見つけました。自動プレフィックスをオフにするには、次のように記述します。

/*!自動プレフィックス: オフ */
-webkit-box-orient: 垂直;
/* 自動プレフィックス: オン */

これはコンパイルが失敗するという問題を解決しますが、コンパイルプロセス中に警告が報告されます。最終的に、GitHubで次のような最善の解決策が見つかりました。

/* 自動プレフィックス: 次を無視 */
-webkit-box-orient: 垂直;

問題は完全に解決され、警告は報告されません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。