css 多行超出隐藏

     

.overflow-ellipsis{

        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
        word-break: break-all;
        -webkit-line-clamp: 2; /* 显示两行 */
        line-clamp: 2; /* 适用于部分浏览器 */
}

若文本实际为4行，但只展示两行。需要调整文本的height

-webkit-line-clamp属性为需要显示的行数

-webkit-box是一个CSS3的属性，用于实现多行文本显示。-webkit-box-orient属性用于设置文本的方向，vertical表示垂直方向。-webkit-line-clamp属性用于设置需要显示的行数，这里设置为3行。text-overflow属性用于设置文本溢出时的省略号。