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

html部分：
<div >
    <span>多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中多行文字居中</span>
</div>
<div>
    <span>一行文字居中</span>
</div>

css部分：
span {
    position: relative;
        padding-left: .833333rem;
        font: bold 1.444444rem/1.3 "microsoft yahei";
        color: #282728;
        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 {
    display: flex;
        align-items: center;
        height: 4rem;
        border-bottom: 1px dashed #d7e1ea;
}
span::before {
        content: '';
        width: .333333rem;
        height: 1.222222rem;
        background-color: #2c97fd;
        position: absolute;
        left: 0;
        top: .333333rem;
    }

效果：

image.png