React--webkit-line-clamp、-webkit-box-orient打包之后不起作用

在项目中要实现多行省略，-webkit-line-clamp: 2;打包后不生效，使用下面的方法样式为..

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

结果打包之后不生效.因为webpack打包的时候会将其忽略

根据官方文档.将原本中的注释 .

            new OptimizeCSSAssetsPlugin({
                cssProcessor: require('cssnano')({
                    reduceIdents: false
                })
            })

替换为

            new OptimizeCSSAssetsPlugin({
                assetNameRegExp: /\.optimize\.css$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
                canPrint: true
            })

optimize-css-assets-webpack-plugin

注:如果此方法还不行

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

将样式中加入

/*! autoprefixer: off */

/*! autoprefixer: on */

 

注意,前面是有“ ! ”的