多行文本省略号样式丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to ne

Posted 前端小记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多行文本省略号样式丢失,以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to ne相关的知识,希望对你有一定的参考价值。

  • 问题现象

    ??使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了。查阅资料,有不少人提出在改样式前后添加注释(后处理程序):
/*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

??再次打包,发现样式恢复正常。然后控制台却多出一条警告:‘(Emitted value instead of an instance of Error) autoprefixer: staticcss esetindex.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 ne的主要内容,如果未能解决你的问题,请参考以下文章

单/多行文本溢出显示省略号+清除浮动

文本显示,单行超出和多行超出显示省略号

CSS+div 控制多行文本的显示,多余的以省略号显示

纯css实现文本内容单行/多行溢出显示省略号

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

css文字单行/多行超出显示省略号...