一阶界、第一種解決方案：
在展示頁面效果的時(shí)候，尤其是移動端上的界面聋庵，我們經(jīng)常會有需求膘融，最多展示兩行，其余用“...”代替祭玉。
于是氧映，就產(chǎn)生了下面的樣式：
????????? ? .div {
????????????text-align: left;
? ? text-overflow: -o-ellipsis-lastline;
? ? overflow: hidden;
? ? text-overflow: ellipsis;
? ? display: -webkit-box;
? ? -webkit-line-clamp: 2;
? ? ? ?-webkit-box-orient: vertical;
? ? }
但是，打包后樣式并沒有產(chǎn)生 “...”的效果脱货。
網(wǎng)上很多說是webpack打包造成的岛都，但是我嘗試了沒有解決。后來振峻，發(fā)現(xiàn)一種解決方案：
? ? ? ? ? ?.div{
????????????text-align: left;
? ? text-overflow: -o-ellipsis-lastline;
? ? overflow: hidden;
? ? text-overflow: ellipsis;
? ? display: -webkit-box;
? ? -webkit-line-clamp: 2;
? /* autoprefixer: off */
? ? -webkit-box-orient: vertical;
? ? /* autoprefixer: on */
}
沒錯臼疫，就是在它上下加這兩段注釋，參考連接?https://github.com/postcss/autoprefixer/issues/776
以上的注釋還不能隨便寫哦扣孟。
autoprefixer只自動添加webkit烫堤，其他的不加
貌似上面寫法已經(jīng)失效了，可以嘗試以下寫法：
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/*! autoprefixer: on */
注：感嘆號不能少
原文：https://blog.csdn.net/u014085502/article/details/79569111
二凤价、第二種解決方案：
找到./build/webpack.prod.config.js?文件 找到下面的這段代碼?注釋掉?重新打包即可
/ -webkit-line-clamp鸽斟、-webkit-box-orient vue打包后不起作用 注釋下面這段代碼
? ? new OptimizeCSSPlugin({
? ? ? cssProcessorOptions: config.build.productionSourceMap
? ? ? ? ? { safe: true, map: { inline: false } }
? ? ? ? : { safe: true }
