多行文本省略号样式失效丢失,以及控制台显示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 ...
随机推荐
- [bzoj1660][Usaco2006 Nov]Bad Hair Day_单调栈
Bad Hair Day bzoj-1660 Usaco-2006 Nov 题目大意:n头牛站成一列,每头牛向后看.f[i]表示第i头牛到第n头牛之间有多少牛,使得这些牛都比i矮,且中间没有比i高的牛 ...
- 洛谷 P2896 [USACO08FEB]一起吃饭Eating Together
P2896 [USACO08FEB]一起吃饭Eating Together 题目描述 The cows are so very silly about their dinner partners. T ...
- Spring MVC-表单(Form)标签-多行文本框(TextArea)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textarea.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...
- ZooKeeper搭建系列集 (这套很全,也很详细)
原文链接:http://blog.csdn.net/shatelang/article/details/7596007 本篇文章结构: 总共包括10个系列 ZooKeeper系列之一:ZooKeepe ...
- HDU 4517
EASY题,直接统计(1,1)到(i,j)的黑点个数,然后计算出以(i,j)点为右下角的矩形内的黑点个数是x*y即可. 注意当x==y时不要重复统计. #include <iostream> ...
- likely, unlikely的作用
在项目中看到了likely.unlikely宏的使用, 一直不是非常清楚它们的作用,所以就深究下. likely表示被測试的表达式大多数情况下为true, unlikely则表示相反. 两个宏定义: ...
- 单片机显示原理(LCD1602)
一.接口 LCD1602是很多单片机爱好者较早接触的字符型液晶显示器,它的主控芯片是HD44780或者其它兼容芯片.与此相仿的是LCD12864液晶显示器,它是一种图形点阵显示器,能显示的内容比LCD ...
- 关于Spring中的<context:annotation-config/>配置作用
转自:https://www.cnblogs.com/iuranus/archive/2012/07/19/2599084.html 当我们需要使用BeanPostProcessor时,直接在Spri ...
- Android常见面试题学习第一天(原创)
1. 内存泄漏 在android程序开发中,当一个对象已经不需要再使用了,本该被回收时,而另外一个正在使用的对象持有它的引用从而导致它不能被回收,这就导致本该被回收的对象不能被回收而停留在堆内存中,内 ...
- 4、Collection接口功能测试(所有的All方法)
package cn.itcast_01; import java.util.ArrayList; import java.util.Collection; /* * 所有带All的方法:(听完就忘) ...