解决react项目多行文本省略号不生效

在普通的前端项目中，如果不考虑兼容问题，一般使用如下方法

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

但是在react项目中却发现不生效，是因为在编译后没有-webkit-box-orient: vertical;
解决方法就是使用行内样式

<p style={{"WebkitBoxOrient": "vertical"}}>
balabalabala
</p>

或在less文件中-webkit-box-orient: vertical;上面加一行过滤

.box {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}