多行文本省略号样式丢失,以及控制台显示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.'

原文地址:https://www.cnblogs.com/yangguojin/p/10301981.html

时间: 2024-10-25 16:56:37

多行文本省略号样式丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'的相关文章

多行文本省略号

代码奉上: <!DOCTYPE HTML> <html> <head> <style> html, body, p { margin: 0; padding: 0; font-family: sans-serif;} .ellipsis { height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; overflow:hidden; } .ellipsis:before {

多行文本省略号的实现.html

多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .d1 { width: 300px; height: 200px; border: 1px solid #ccc; overflow: hidden; text-overf

单行,多行文本省略号

单行文本省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端: 注: -webkit-line-clamp用来限制在一个块元素显

单行文本省略号和多行文本省略号

单行文本省略号的设置必须满足,以下四个条件: 1.固定的宽度:width:value; 2.强制在一行显示:white-sapce:nowrap; 3.溢出部分隐藏不可见:overflow:hidden; 4.显示省略号:text-overflow:ellipisis; 多行文本省略号: 1.display:-webkit-box; 2.-webkit-box-orient:vertical; 3.-webkit-line-clamp:3; 4.overflow:hidden; 原文地址:htt

css多行文本省略号问题

已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overflow: hidden;//溢出隐藏 今天刚好遇到关于多行文本溢出,超出部分用...代替的问题,查找了一些资料.原文参考页面底部的链接 1:WebKit浏览器或移动端的页面 需要使用webkit私有属性,css草案中没有,因此不是标准的css属性.css代码如下 display: -webkit-bo

多行文本省略号,alt,title,...03/27/9:30

1,导航栏设置,li只设置block和float:left 就可以了,剩下的大小,样式设置a就可以了.2.<img>里面title属性是可以鼠标滑过有文字提醒;alt是在图片加载不出来时有文字,鼠标滑过没有文字提醒, 3,单行文本省略号: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 4,webkit浏览器或移动端的网页 overflow:hidden;text-overflow:ellipsis;display:-web

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

django admin页面样式丢失问题

wamp 配置django admin页面样式丢失问题 第一种方法:在apache配置文件httpd.conf中加入如下代码:Alias /static "E:\Python27\Lib\site-packages\django\contrib\admin\static"<Directory "E:\Python27\Lib\site-packages\django\contrib\admin"> Options Indexes FollowSymLin

CSS如何设置对象中第一行文本的样式

CSS如何设置对象中第一行文本的样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.可能有时候需要特别设置对象中第一行文本的样式,下面简单介绍一下.代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &