问题
在react项目中遇到过这么个问题,一般我们通过下面的css属性都能实现多行省略,但是在react却会失效
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
测试了半天才发现 -webkit-box-orient: vertical; 这个属性react无法解析,所以我们可以将它写在内联样式中,如下所示
<div className="content" style={{ WebkitBoxOrient: "vertical" }}>
</div>
那么,就不能用css解决了吗?不,万能百度告诉我们,也可以这么实现
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
经测试都能完美生效