nuxt.js中发生的样式问题:css文字多行溢出无效解决方案
.box { display: block; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
上面代码是我们常常解决html 文字多行溢出的方式,普通模式下html传统开发似乎并不太会出现什么问题。
最近在开发nuxt.js项目中,有一块区域元素想实现这样的溢出功能,变按照上面的代码去写,但是结果出来并没有什么改变,多次调试居然发现该元素应用样式中并没有
-webkit-box-orient这个关键的属性,这到底是怎么回事呢?
在我们现代开发中,为了提高前端工程便于维护和提高开发效率,我们常常使用webpack,gulp等一类的构建工具,在css处理方面,可能常用到的是postcss这个强大的css预处理插件,详细用处就不用多说了。在查阅一些资料发现,是 autoprefixer 这个插件引起的,已集成在postcss中,用来处理不同浏览器中自动填充css前缀的兼容性问题。
nuxt.js官方脚手架正包含了这一插件,按照一些社区提供解决的方案,可以在以上样式做以下修改
.box { display: block; display: -webkit-box; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* autoprefixer: ignore next */
[css rules]
这句话标记作用可以让 autoprefixer 插件关闭对下一句css代码的检查或处理