nuxt.js中发生的样式问题：css文字多行溢出无效解决方案

佚名 6年前 (2019-05-13) 随笔 1576人围观抢沙发百度已收录

.box {
     display: block;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     overflow: hidden;
}

上面代码是我们常常解决html 文字多行溢出的方式，普通模式下html传统开发似乎并不太会出现什么问题。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

最近在开发nuxt.js项目中，有一块区域元素想实现这样的溢出功能，变按照上面的代码去写，但是结果出来并没有什么改变，多次调试居然发现该元素应用样式中并没有

-webkit-box-orient这个关键的属性，这到底是怎么回事呢？在我们现代开发中，为了提高前端工程便于维护和提高开发效率，我们常常使用webpack，gulp等一类的构建工具，在css处理方面，可能常用到的是 postcss这个强大的css预处理插件，详细用处就不用多说了。在查阅一些资料发现，是 autoprefixer 这个插件引起的，已集成在 postcss中，用来处理不同浏览器中自动填充css前缀的兼容性问题。 nuxt.js官方脚手架正包含了这一插件，按照一些社区提供解决的方案，可以在以上样式做以下修改

.box {
     display: block;
     display: -webkit-box;
     /* autoprefixer: off */
    -webkit-box-orient: vertical;
     /* autoprefixer: on */
    -webkit-line-clamp: 2;
     overflow: hidden;
}

/* autoprefixer: off */
[css rules]
/* autoprefixer: on */

在此区块中间可以让 autoprefixer 插件关闭对此区域的检查或处理