一、起因

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

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

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

二、解決辦法

網上找了一個可行的解決方案，把autoprefixer關掉，有一種寫法：

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

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。