多行文字，最后一行显示不下省略纯css

最新推荐文章于 2024-08-20 13:42:14 发布

gooodi

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量1.1k

点赞数

分类专栏：记录 vue css

本文链接：https://blog.csdn.net/gooodi/article/details/93894256

版权

记录同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

css 代码：

多行：

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;  //显示的行数

-webkit-box-orient: vertical;

顺便放下单行的：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

问题：

在项目中，代码打包后，-webkit-box-orient: vertical; 这句丢失了

解决办法：

1.把其写在内联样式中

2.禁止安装的autoprefixer对这行代码进行优化，这样就可以避免打包后这行代码的丢失：

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

3.修改打包配置文件，去掉css的代码压缩：

① webpack.prod.conf.js文件中的以下代码需要注释掉
new OptimizeCSSPlugin({
   cssProcessorOptions: config.build.productionSourceMap
      ? { safe: true, map: { inline: false } }
      : { safe: true }
    }),
②  utils.js文件中添加minimize:true：
const cssLoader = {
 loader: 'css-loader',
     options: {
        sourceMap: options.sourceMap,
        minimize:true
      }
   }