解决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>

 <View className="recommendTitle" style={{ WebkitBoxOrient: "vertical" }}>
              {item.title}
 </View>

或在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;
}


 .recommendTitle {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            /* autoprefixer   : ignore next */
            -webkit-box-orient: vertical;
            width: 500px;
            text-align: left;
            font-size: 30px;
            color: rgba(51, 51, 51, 1);
            padding: 5px;
          }