vue中使用-webkit-line-clamp、-webkit-box-orient屬性，項目打包後不生效？

1、

以前公司作混合app開發，詳情頁有一個功能 收到後臺給的數據展現到頁面上 超過幾行時 顯示按鈕-查看所有，以後可點擊-收起

在瀏覽器調試是能夠的，項目打包放測試測的時候，樣式卻不生效

網上查資料看的說緣由是：

會被打包的postCSS這個插件去掉的，好像是由於這個屬性不是規範。
能夠寫在行內style裏面，這樣就不會被插件去掉了。

解決方法：

第一種直接設置css：

/*！autoprefixer: off */  
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 3;
/*！autoprefixer: on */ 

/*! autoprefixer: on */ 放本身的css代碼  /*! autoprefixer: off */
注：前面有 ！

第二種配置文件：

一、安裝依賴這個依賴：npm i -S optimize-css-assets-webpack-plugin

二、而且註釋掉 build ---> webpack.prod.conf.js中的一段代碼：

// new OptimizeCSSPlugin({
//      cssProcessorOptions: config.build.productionSourceMap
//        ? { safe: true, map: { inline: false } }
//        : { safe: true }
// })　　

 經測試後有效，第一種適合項目中用到的很少，第二種直接配置後就可，根據項目使用狀況處理

------------------------------------------------------------------------------------------------------------------------------------

2、

查看所有  收起

項目中正好其餘地方也用到jq了 爲方便直接用jq進行了下操做，若是要規範可用vue語法

css

 

 html

 

 js

 

 

 

只是記錄一下問題，歡迎你們進行交流哈

參考連接：

https://blog.csdn.net/houdabiao/article/details/82462933

https://blog.csdn.net/ci250454344/article/details/85257311