526互联

单行显示和多行显示省略号

发布时间 2023-07-07 08:41:08作者: Panax
// 单行显示
.oneline {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: -webkit-box;
}
// 多行展示
.twoline {
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
}