如何解決CSS中-webkit-box-orient: vertical屬性編譯后丟失問題

發(fā)布時間：2021-08-03 10:35:30 來源：億速云閱讀：519 作者：小新欄目：web開發(fā)

這篇文章主要介紹了如何解決CSS中-webkit-box-orient: vertical屬性編譯后丟失問題，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、起因

需求要求展示兩行，多余的文字用三個點替代，于是用了這幾個不太規(guī)范的屬性

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

后來發(fā)現(xiàn)代碼里寫的好好的，一到頁面上居然沒有反應(yīng)，和沒寫一個樣，f12看了下，原來是-webkit-box-orient: vertical;這個屬性丟失，導致了不生效，在Styles里把這個屬性加上就好了，于是斷定是編譯過程導致這個屬性丟失。

二、解決辦法

網(wǎng)上找了一個可行的解決方案，把autoprefixer關(guān)掉，有一種寫法：

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

這樣確實解決了編譯丟失的情況，但會在編譯過程中報warning，最后到GitHub上找到最佳解決方案,如下

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

問題完美解決，也不報warning了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決CSS中-webkit-box-orient: vertical屬性編譯后丟失問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

猜你喜歡