溢出文字显示省略号方法（多行有坑，记得避）

1、单行文字溢出显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、多行文字溢出显示省略号

   /* 多行溢出文字显示省略号五部曲 */
   overflow: hidden;
   text-overflow: ellipsis;
   /* 弹性伸缩盒子模型显示 */
   display: -webkit-box;
   /* 限制在一个块元素显示的文本的行数  3表示在第三行显示省略号*/
   -webkit-line-clamp: 3;
   /* 设置或检索伸缩盒对象的子元素的排列方式 */
   -webkit-box-orient: vertical;



overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

多行溢出，浏览器可以正常解析-webkit-box-orient: vertical;

但是编译后发现，页面上并没有显示...,打开F12发现，-webkit-box-orient: vertical;并没有解析出来，好了，遇到坑了，经过编译后就把-webkit-box-orient: vertical干掉了

然后找了两个结局方案：

1.可以解决，但是会在编译过程中报warning

/* autoprefixer: off*/
 -webkit-box-orient: vertical; 
/* autoprefixer: on*/

2.找到配置文件webpack.config.js文件，注释掉一下代码

new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? 
        :  
    }),

这个我不敢注释，毕竟是之前项目，咱们能不改就不改

3.好像行不通，但是别人说可以

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

4.css行内写法，可以搞定

  <span style={{ '-webkit-box-orient': 'vertical' }}>你好！ </span>