webkit-box-orient不见了, webkit 和 autoprefixer 的坑

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

autoprefixer


autoprefixer不仅会帮你加-webkit-之类的prefixer,
它还会帮你删除你自己写在 css/sass/less里的样式,
真是厉害了

关闭autoprefixer的自动删除功能,这样:

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


用注释包裹的中间这一句就不会被删除

再深究一下
1.autoprefixer会帮你删除老式过时的代码
2.autoprefixer也会帮你增加新前缀

你可以增加remove: false这个配置项,就不会开启自动移除功能

postcss([ autoprefixer({ remove: false }) ]);


不仅如此,你还可以只让它移除老前缀,不自动增加新前缀

postcss([ autoprefixer({ add: false, browsers: [] })]);


原文引用:

Outdated Prefixes
By default, Autoprefixer also removes outdated prefixes.

You can disable this behavior with the remove: false option. If you have no legacy code, this option will make Autoprefixer about 10% faster.

Also, you can set the add: false option. Autoprefixer will only clean outdated prefixes, but will not add any new prefixes.

Autoprefixer adds new prefixes between any unprefixed properties and already written prefixes in your CSS. If it will break the expected prefixes order, you can clean all prefixes from your CSS and then add the necessary prefixes again:

var cleaner  = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
var prefixer = postcss([ autoprefixer ]);

cleaner.process(css).then(function (cleaned) {
    return prefixer.process(cleaned.css);
}).then(function (result) {
    console.log(result.css);
});

https://www.npmjs.com/package/autoprefixer

vue中打包后-webkit-box-orient: vertical消失(超出省略号失效) 之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/ -webkit-b... 阅读详情

相关推荐

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

一、起因 需求要求展示两行,多余的文字用三个点替代,于是用了这几个不太规范的属性 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是-webkit-box-orient: vertical;这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法: /*! autoprefixe

webpack打包自动移除老式样式

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

CamilleZJ的博客 477

Abaqus 2023 保姆级安装避坑指南:从环境变量到许可证配置,一次搞定

本文提供Abaqus 2023的详细安装指南,涵盖环境变量设置、许可证配置等关键步骤,帮助用户避开常见安装陷阱。通过系统环境检查、目录结构规划、许可证服务器安装及Java环境配置等实用技巧,确保顺利完成安装并优化软件性能。

weixin_42524276的博客 426

VS Code autoprefixer v3.0.1配置

Autoprefixer不生效,不起作用, 网上查询了很多版本的解决方法。都没有解决,最终其实这个问题很简单。什么退回老版本,都不是必要的。 一、前提条件: 用管理员身份运行VS Code 二、安装最新版本的Autoprefixer 三、设置快捷键为:Ctrl+Alt+X(也可以根据自己需要设置) 四:配制 "autoprefixer.options": { // 定义浏览器参数 "overrideBrowserslist": [ ...

liyinet的专栏 620

UE5在Ubuntu22.04.4下的高效开发环境配置指南

本文详细介绍了在Ubuntu 22.04.4系统上配置UE5高效开发环境的完整指南,包括系统准备、显卡驱动安装、UE5引擎编译与配置、开发工具链设置以及性能优化技巧。通过逐步指导,帮助开发者快速搭建稳定的UE5开发环境,解决常见问题,提升开发效率。

weixin_29251131的博客 383

vivado中出现ERROR: [Labtools 27-2220]检测不出开发板

这个错误可能是由于 Vivado 工具中的 cs_server.exe 文件没有正确安装或者文件路径不正确导致的。你可以尝试以下步骤来。时间: 2023-08-16 12:05:50 浏览: 767。希望以上方法能够帮助你。

qq_40510975的博客 2388

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

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

screaming_color的博客 4387

DSP在线升级方案:TMS320C6678使用网络或者串口输出升级数据进行固件升级

下面这段先引用创龙的说明 IBL 运行后, 将从 NOR FLASH 或 NAND FLASH 的 0x00080000 地址引导 ELF/BBLOB 格式 用户程序。 当引导 ELF 格式用户程序时, IBL 会解析用户程序头部信息,并根据头部信息 拷贝不同的代码段至指定 CPU 内存地址,然后将 PC 指针跳转至_c_int00, 再运行用户程 序。当引导 BBLOB 格式用户程序时,由于无头部信息, IBL 会将用户程序拷贝至 0x9E000000 (该内存地址为 IBL 代码指定),并将 PC..

ToneChip的专栏,一个传统的嵌入式码农,裸机编程 1942

css添加文本 vue_vue中打包后出现css中文本超出部分隐藏显示省略号失效

这是webpack的锅,webpack打包后-webkit-box-orient被移除,所以导致失效。【产生原因】:autoprefixer自动移除老式过时的代码解决方法一:添加注释关闭autoprefixer,但是如果有清除注释的插件,请将插件设为false,否则不生效:注意要带上感叹号!!!!!.content {display: -webkit-box; /*作为弹性伸缩盒子模型显示*/-w...

weixin_31669073的博客 321

基于远程服务器 Tip_Adapter源码从零开始复现

从零一步步实现源代码的运行

zcyzcyjava的博客 1602

IDEA集成selenium自动化测试(Java+Selenuim+testNG+Maven)

文章目录写在前面01 | 新建Maven项目02 | idea集成Selenium03 | 写在前面 因为软件测试的需求和博主比较经常使用Java,于是,想在Idea中集成selenuim,用Java编写测试代码,因此有了这篇文章来记录一下过程。 资源指路: java使用selenium实现模拟浏览器操作API大全 模拟登录 TestNG入门教程 感谢上面博客的大佬。 01 | 新建Maven项目 不使用骨架创建,直接点击左侧Maven,然后一路next即可。 02 | idea集成Sele

aLinxi的博客 8279

-webkit-box-orient不见了, webkit 和 autoprefixer 的坑

autoprefixer autoprefixer不仅会帮你加-webkit-之类的prefixer, 它还会帮你删除你自己写在 css/sass/less里的样式, 真是厉害了 关闭autoprefixer的自动删除功能,这样: /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ ...

hao像飘在外太空的博客 7125

如何解决Elsevier和IEEE期刊之间参考文献的转换问题

Elsevier期刊和IEEE旗下的期刊两者模版互相转换的时候,会发现Elsevier模版的参考文献是存放在.bib文件下的,然后在.tex文件中直接引用即可。3. 在IEEE的.tex文件中的\end{document}命令行之前,添加下面的这句话(ps:\bibliography{**}中的**名称即为.bib文件的名称)如何将Elsevier的参考文献快速的转成IEEE期刊可用的格式,是本博客需要解决的问题。2. 将下载好的.bib文件,上传到IEEE的latex文件中。

薰珞婷紫小亭子的博客 1675

vue项目中关于CSS样式-webkit-box-orient: vertical丢失问题

-webkit-box-orient: vertical丢失

m0_57484291的博客 1468

使用 Simulink 进行电力电子系统的小信号模型仿真

电力电子系统(Power Electronics System)包括各种功率转换器(如 DC-DC 转换器、逆变器等)。这些设备中的关键组件(如 MOSFET、IGBT、电容器、电感器等)不仅影响系统的性能,还直接关系到系统的稳定性、效率和可靠性。因此,在设计阶段进行详细的建模和仿真至关重要。小信号模型仿真的目的是通过线性化非线性系统来评估其动态特性,包括增益、相位裕度、带宽等指标。通过本教程,我们介绍了如何使用 Simulink 进行电力电子系统的小信号模型仿真。背景介绍。

xiaoheshang_123的博客 480

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

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

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

Anony_me的博客 3626

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

Taro -webkit-box-orient: vertical失效

问题复现 用Taro写一块文本超出部分用…替代,效果如下: 正常逻辑 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word...

harry_yaya的博客 604

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

-webkit-box-orient:vertical 编译报错之autoprefixer问题

由于各大浏览器的兼容问题,autoprefixer 插件可以帮我们自动补齐前缀。本篇带你了解autoprefixer 插件,以及开发问题解决。

heyYouU的博客 1226

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

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

weixin_39015132的博客 1971

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

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

weixin_30772105的博客 423

-webkit-box-clamp失效和-webkit-box-orient:vertical被过滤

在使用-webkit-box-clamp:2一直失效 .content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow:ellipsis; } 网上也找了解决方法,但是没有用。最后发现控制台少了-webk...

baidu_33614459的博客 1510

vue打包以后-webkit-box-orient: vertical消失的问题

方法1. (自测无效) /* autoprefixer: off*/ -webkit-box-orient: vertical; /* autoprefixer: on*/ 方法2 (自测无效) /* autoprefixer: ignore next */ -webkit-box-orient: vertical; 方法3(有效) 注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config

s_wollow的博客 305

[前端]vue中打包后-webkit-box-orient: vertical消失(超出省略号失效)

之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:1;/*文本占的行数,如果要设置2行加.....

heyuqing32的博客 798

css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案

最近遇到一个奇怪的问题,在设置超出n行即显示省略号的css时,开发环境都没有问题,而build之后发现不好使,通过调试发现是-webkit-box-orient这个样式丢失了我写的css样式display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;打包之后的css样式,缺少-we...

weixin_39864373的博客 1408

在 vue 项目中使用 -webkit-box-orient 属性

问题描述:在 vue 项目 less/scss/css 中使用 -webkit-box-orient: vertical; 属性, 项目打包编译以后 -webkit-box-orient: vertical; 后消失。 产生原因:autoprefixer 自动移除老式过时的代码。 解决方案: 方法1、添加注释关闭 autoprefixer,但是若果有清除注释的插件,请将该插件设为 false,否则...

LonewoIf的博客 1323

-webkit-box-orient打包后无效

-webkit-box-orient打包后无效

Rainy_X的博客 477
上一篇: git-bash的alias别名设置
下一篇: filter函数(JS)
哈哈hyc
博客等级 码龄8年 131粉丝 87原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值