2022-04-21【技术】项目中-webkit-line-clamp 控制行数失效

1、项目背景：

在vue项目里 写了一个css样式 用来控制 显示的行数，只显示2行多出来的用引号代替，在本地运行的vue项目里没有问题，浏览器真机调试模式下，也没问题，但是打包后放到测试环境，并且使用手机测试，控制行数的样式就不生效了。
使用edge浏览器中的edge://inspect/#devices，查看一下真机DOM元素发现， -webkit-box-orient: vertical;这个属性被莫名其妙的删除了。
显示出了这个样子：

image.png

在F12控制台里，手动加上 -webkit-box-orient: vertical;这个属性后，确实生效了。因此我怀疑是打包过程中，某些因素影响，将 -webkit-box-orient: vertical;这个属性删除了。
然后通过查找资料网上说是因为 -webkit-box-orient: vertical;这个属性不是规范会被打包的postCSS这个插件去掉的。在网上找了几个方法，其中有一种亲测可以。

2、解决方案

初始演示示例代码：

.text{
                font-size:30px;
                line-height:32px;
                color:red;
                overflow: hidden;
                display:-webkit-box;
                text-overflow:ellipsis;
                -webkit-line-clamp:2;
                -webkit-box-orient:vertical;
    }

方案一：原因可能是因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作。但是这个方法在我的项目里不生效，大家可以试下。

.text{
                font-size:30px;
                line-height:32px;
                color:red;
                overflow: hidden;
                display:-webkit-box;
                text-overflow:ellipsis;
                -webkit-line-clamp:2;
               /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
    }

方案二： 用 /*! autoprefixer: ignore next */ 语句 。但是这个方法在我的项目里也不生效，大家可以试下。

.text{
                font-size:30px;
                line-height:32px;
                color:red;
                overflow: hidden;
                display:-webkit-box;
                text-overflow:ellipsis;
                -webkit-line-clamp:2;
                /*! autoprefixer: ignore next */
                -webkit-box-orient:vertical;
    }

方案三：直接将该样式写为行内样式。

style="color:red;-webkit-box-orient: vertical;"

效果图如下：

image.png

2022年9月8日 10:49:53 新增：

方案四：网友提供，这个方法适合多个地方使用了 控制行数的情况，这个方法网友亲测有效。

1>、安装依赖这个依赖：npm i -S optimize-css-assets-webpack-plugin
2>、并且注释掉 build ---> webpack.prod.conf.js中的一段代码：

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