解决react 多行文本显示省略号不生效问题

在普通的前端css中，如果要是文本超出一行就显示省略号，一般在css中写：

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

要想多行文本显示省略号（这里不考虑兼容情况），一般这样写：

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

但是上面这种写法在react项目中不生效，经过查阅后是发现编译后-webkit-box-orient: vertical;
解决这个问题有三种情况：

1. 可以去下载插件optimize-css-assets-webpack-plugin，然后在webpack中做相关插件配置（我没有试过，但是网上有vue项目这么做过）
2. 第二种方法就是使用内联样式，在需要用到这个css的时候就在那加，比如：

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

3. 或在less文件中-webkit-box-orient: vertical;上面加一行如下过滤：/* autoprefixer: ignore next */

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

这样就能在react中也能实现多行文本超出显示省略号了