css多行省略-webkit-box-orient打包编译后失效原因
原css代码:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
打包上线后代码:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-line-clamp:;
overflow: hidden;
}
原因:编译时会自动过滤掉 -webkit-box-orient: vertical
解决办法:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-line-clamp:;
overflow: hidden;
/*! autoprefixer: off */
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
/*! autoprefixer: on */
}
需要注意的是autoprefixer前面有个“!”。
需要注意的是autoprefixer前面有个“!”。
需要注意的是autoprefixer前面有个“!”。
css多行省略-webkit-box-orient打包编译后失效原因的更多相关文章
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- css多行省略和单行省略
实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...
- CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 / ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...
- 纯 CSS 自定义多行省略:从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- 黑科技:CSS定制多行省略
转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...
- 黑科技:纯CSS定制文本省略
作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...
随机推荐
- .5-浅析webpack源码之入口函数
从convert-argv出来后,目前进度在这: yargs.parse(process.argv.slice(2), (err, argv, output) => { // ... // 从这 ...
- C# Azure 用Webhook添加警报规则
本篇文章的目的是什么? Azure云端一直困扰着我的是,如果遇到数据库累积数据量过大.数据库DTU过大.应用程序服务访问量过大等,我们都没办法知道他们什么时候过大.只能做的是,我们天天看着我们的应用, ...
- C++切割文件
void CFileCutter::DoSplit() { ; //计数 CString strSourceFile = m_strSource; //取得全局变量赋值给局部变量,方便操作 CStri ...
- POJ3304(KB13-C 计算几何)
Segments Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15335 Accepted: 4862 Descrip ...
- JavaSE——线程同步
为什么需要线程同步? 同步就是协同步调,按预定的先后次序进行运行.如:你说完,我再说而并非一起动作.“同”字应是指协同.协助.互相配合. 如进程.线程同步,可理解为进程或线程A和B一块配合,A执行到一 ...
- Android Studio 自动更新失败解决办法
Check Update一直提示Connection failed. Please check your network connection and try again,开始以为是由于G*W在捣乱, ...
- RecyclerView源码解析 - 分割线
猜想: 既然考虑了分割线,那么子View在测量时候肯定要去考虑分割线留出的位置 直接measureChild()方法 猜想: 分割线会调用绘制的方法 onDraw()
- apktool逆向apk包
在AndroidStudio创建so一节里创建了so,并且在java里面调用so的HelloWorld方法,编译Android Studio后生成包app-debug.apk. 在逆向apk时如果该a ...
- Group by 分组查询 实战
实战经历,由于本人在共享单车上班,我们的单车管理模块,可以根据单车号查询单车,但是单车号没有设置unique(独一无二约束),说以这就增加了单车号可能重复的风险,但是一般情况下,单车号是不会重复的,因 ...
- window下安装RabbitMQ
RabbitMQ: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消 ...