一行或多行文字始终垂直居中显示

效果图

image.png

image.png

image.png

1.html

            
            

                春节期间，回家过年，年后发货！春节期间，回家过年，年后发货！春节期间，回家过年，年后发货！
            
        

2.css

.shop{
    height: 50px;
    padding: 15px;
    position: relative;
}
.shop img{
    height: 50px;
    width: 50px;
}
.shopAdver{
    width: calc(100% - 90px);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; /*最多几行就写几*/
    -webkit-box-orient: vertical;
    display: -webkit-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 75px;
}