webpack编译-webkit-box-orient: vertical 消失问题解决方案

最新推荐文章于 2023-06-12 10:54:17 发布

bini000

最新推荐文章于 2023-06-12 10:54:17 发布

阅读量772

点赞数

本文链接：https://blog.csdn.net/bini000/article/details/83684247

版权

手上的项目恰好碰到这个问题试了很多方法最后网上找到了解决方案

解决方案：

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

参考链接：https://github.com/postcss/autoprefixer/issues/776

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bini000

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS中文本对齐方式-文本处理案例

JackieDYH的博客

08-16

2899

文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单 p{ text-align: center; text-align: left; text-align: right; } 但是两端对齐你有用过吗？只需要添加text-align-last:justify样式即可 <div class="justify-text"> <div class="li">账号</div> <div clas

自定义mixin.less并全局注入至项目中

w候人兮猗

12-06

837

前言有的时候写项目，需要一些通用的css样式来实现一些功能，比如居中、渐变、单行溢出省略号、多行溢出省略号等. 项目使用的less预处理器，所以整理了一些常见的mixin函数实现新建mixin.less文件,整理了一些笔者常用的几个，其他的可以自行添加具体less如何使用可以看https://www.w3cschool.cn/less/less_installation.html .ell...

参与评论您还未登录，请先登录后发表或查看评论

webpck不能编译这个属性-webkit-box-orient: vertical

jackie_bobo的博客

08-14

907

多出指定行后，用省略号…代替。 -webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： - display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型...

webpack 打包编译-webkit-box-orient: vertical 后消失

weixin_30448685的博客

03-08

170

/* autoprefixer: off */ -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */ 打包时必须使用这种方法打包，否则打包后-webkit-box-orient: vertical ...

解决webpack打包后-webkit-box-orient: vertical ;消失问题

weixin_30598225的博客

11-26

171

在前段展示中，一个很常见的问题就是多行文本溢出显示“...”,再是对兼容性要求不算太高的时候使用box布局是一种非常实用的方法 .ellipsis-2{ overflow hidden text-overflow ellipsis display -webkit-box -webkit-line-clamp 2 -webkit-box-orient vert...

-webkit-box-orient: vertical;在webpack 打包过程中会被清理掉

猿小龙

03-26

299

第一种方法：在css红添加注释命令; /* autoprefixer: off */ 跳过webpack 打包 -webkit-box-orient: vertical; /* autoprefixer: on */ 第二种方法：修改配置文件； 1.找到配置文件/build/webpack.prod.conf.js文件，注释掉一下代码 new OptimizeCSSP...

vue中-webkit-box-orient：vertical打包放到线上不显示

weixin_30799995的博客

06-14

146

解决方法：　　1、找到build文件夹下的webpack.prod.conf.js文件 2、注释new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: tru...

uni-app 开发/学习笔记

hujian66的博客

04-06

169

uni-app 开发/学习笔记 in ZB

【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）

qq_48687155的博客

07-26

1076

掌握vant组件库的使用-找组件,引组件,用组件能够对vant组件自带样式进行覆盖自定义遇到重复的标签,自己也封装了一个复用的组件掌握查询文档和使用每个属性的方式。

前端面试-CSS

wanglu458512的博客

09-19

3033

一、CSS基础 CSS选择器及其优先级对于选择器的优先级：标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用

vue-cli 背景图片、-webkit-box-orient: vertical打包后丢失问题

panling_dml的博客

07-06

430

背景图片需更改build/utils.js文件，添加publicPath: '../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' ...

CSS: webpack打包后-webkit-box-orient: vertical;消失了

weixin_39015132的博客

08-03

1858

前言多行文本后隐藏的less代码： .title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-direction: column; } v...

前端项目解决webpack打包后-webkit-box-orient: vertical ;消失问题

泥猴桃的博客

12-06

651

前端写样式的时候经常会用到文字溢出隐藏变省略号的样式。使用-webkit-box-orient: vertical;样式，但是打包上线后，发现样式丢失方法1：加上注释命令，让autoprefixer编译的时候关闭对这行代码的转换。 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; ...

webpack3不支持-webkit-box-orient:vertical

qq_34486420的博客

04-16

1331

问题：css3样式超出两行隐藏在webpack3不起效果，-webkit-box-orient:vertical不会被编译解决办法：原因：autoprefixer不仅会帮你加-webkit-之类的prefixer，还会删除css中的样式，用注释包裹就不会被删除...

解决webpack打包后-webkit-box-orient: vertical;失效问题

haolijuan520的博客

12-03

614

在展示页面效果的时候，尤其是移动端上的界面，我们经常会有需求，最多展示两行，其余用“…”代替。于是，就产生了下面的样式： .div { text-align: left; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webki...

解决webpack打包后-webkit-box-orient被移除问题

screaming_color的博客

07-05

4277

[产生原因] : autoprefixer自动移除老式过时的代码 [关于autoprefixer] : https://www.npmjs.com/package/autoprefixer [解决] 方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效 /* autoprefixer: off */ -webkit-box-ori...

-webkit-box-orient: vertical 打包后丢失的问题

weixin_30772105的博客

03-13

355

以上代码是scss中书写的超出N行省略的css代码。正常的，当我们通过css来控制超出N行隐藏的时候，一般css会这样来写， overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; 这几行代...

如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题

Anony_me的博客

06-15

3449

一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法：这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下问题解决，也不报warning了。...

解决CSS中-webkit-box-orient: vertical属性编译后丢失问题