超出两行出现省略号vue项目上线后失效

本地好好的，一上线就挂了，大坑,有一个css属性死活不出来，这个属性如下写就行了

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

两行超出省略号，一行文字居中问题

//html结构
<div>
      <p>
            <span>超出两行省略，一行居中</span>
      </p>
</div>
//css
<style>
div{
    width:100px;
    height:50px;
    display:flex;
   align-items:center;
}
p{
  display:inline-block
}
span{
      overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}
</style>