WebPack 打包后部分样式丢失

WebPack 打包后部分样式丢失

 

问题描述

项目中,有一段文本长度需要做长度限制,就需要使用 css 来实现。

下面的代码是实现 2 行文字,超过长度出现 ... 省略号的代码:

width: 300px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

写完经过测试后发现,在 Chrome 浏览器中的效果简直是完美。

然后提交代码,打包上线。一刷新之后,却是没有一点效果。

问题缘由

经过 Chrome 的调试工具发现,我们写的 -webkit-box-orient: vertical 属性没有了。

解决方案

Google 一番之后,原来是 WebPack 的 cssnano 插件作怪,把它给移除了。

可以直接在需要忽略的代码上下添加 /* autoprefixer: off *//* autoprefixer: on */ 这两行注释就行。

代码如下:

width: 300px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

 

本文由 开发指南 作者:开发指南 发表,其版权均为 开发指南 所有,文章内容系作者个人观点,不代表 开发指南 对观点赞同或支持。如需转载,请注明文章来源。
9
开发指南

发表评论