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代码的检查或处理

转载于:https://www.cnblogs.com/xldsdr/p/10856308.html