多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'
问题现象
使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了。查阅资料,有不少人提出在改样式前后添加注释(后处理程序):
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
再次打包,发现样式恢复正常。然后控制台却多出一条警告:‘(Emitted value instead of an instance of Error) autoprefixer: \static\css\reset\index.css:99:3: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.’,这对于强迫症来说是极其难受的。
原因
正如警告中所说,以上的css处理语句控制的应该是整个css块,而不是在此之后的css。
处理
将此处修改为:
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
恢复正常。
多行文本省略号样式失效丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'的更多相关文章
- 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 / ...
- 多行文本省略号的实现.html
多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS 设置多行文本省略号 ...
CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...
- css多行文本省略号问题
已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...
- css多行文本省略号(...)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现单行文本省略 <!DOCTYPE html ...
- 微信小程序之多行文本省略号
最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...
- css多行文本省略号
适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...
- [CSS备忘]多行文本省略号
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
随机推荐
- hdu 1716 深搜dfs
#include<stdio.h> #include<stdlib.h> #include<string.h> #define N 5 int f[N]; int ...
- Cloudera 5.8.3 SolrCloud+HDFS的索引数据备份和恢复。(需重启solr进程。)
一.备份基于HDFS的solrCloud集合数据 1.确认要备份的solr文件夹. /solr/history_customer_collection_test 2.开启HDFS快照功能. hdfs ...
- 安卓离线SDK Windows版 资源包下载地址全集
1.Tools https://dl-ssl.google.com/android/repository/platform-tools_r19.0.1-windows.zip https://d ...
- hdu 1698 Just a Hook 基本线段树
使用线段树更新每段区间的奖(1,2,3),最后在统计整段区间的数和,基本线段树,果断1A啊 #include<iostream> #include<stdio.h> using ...
- AdaBoostClassifier实战
AdaBoostClassifier实战 部分内容摘自:http://blog.csdn.net/sun_shengyun/article/details/54289955 这里我们用一个具体的例子来 ...
- P1025小飞侠的游园方案
描述 经过抽签选择,小智将军第一个进入考场. 菜虫:(身上散射出华贵(?)的光芒)欢迎你,第一位挑战者!! 小智:……(走到菜虫身后,关灯)女王陛下,虽然我们国家现在很富裕,但也请您不要浪费电来用这么 ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- A - A Compatible Pair
Problem description Nian is a monster which lives deep in the oceans. Once a year, it shows up on th ...
- HBase编程 API入门系列之工具Bytes类(7)
这是从程度开发层面来说,为了方便和提高开发人员. 这个工具Bytes类,有很多很多方法,帮助我们HBase编程开发人员,提高开发. 这里,我只赘述,很常用的! package zhouls.bigda ...
- Struts2的学习链接
---- Struts2的学习途径 (downpour) http://www.iteye.com/wiki/struts2/1306-struts2-way-of-learning ---- Str ...