CSS Tips

CSS tips

隐藏滚动条

    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
        width: 0;
    };

限制文字显示行数

1. -webkit-line-clamp

    display: -webkit-box;
    overflow: hidden;
    max-height: calc(2*1.15*1.5rem);
    line-height: 25px;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

2. text-overflow: ellipsis

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Sticky

• 用法：容器要有height，overflow: scroll/auto; position: sticky;