vue build 之后页面 -webkit-line-clamp: 2; -webkit-box-orient: vertical;失效不起作用

晏紫苏_cc

于 2018-10-29 16:36:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 移动开发

本文链接：https://blog.csdn.net/yanzisu_congcong/article/details/83508201

移动开发同时被 2 个专栏收录

29 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

本文介绍了解决Vue项目中使用-webkit-line-clamp和-webkit-box-orient在打包后失效的问题，通过注释掉特定的代码段，可以有效避免这些问题，确保网页样式的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

找到./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 }
    }),

或

  word-break: break-all; /* 数字英文自动换行*/
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient:vertical;
  /* autoprefixer: on */

上面的注释会在打包的时候把-webkit-box-orient:vertical 打包进去