css单行垂直居中，超过两行显示省略号

HTML：

<div>
     <span>单行居中，多行居左单行居中，多行居左</span>
</div>
<div>
     <span>单行居中</span>
</div>

 

CSS:

span {
font-size:14px;
overflow:hidden;
text-overflow:-o-ellipsis-lastline;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
}
div {
border:1px solid red;
width:100px;
height:60px;
display:flex;
align-items:center;
margin-top:1rem;
}