Skip to content

CSS Tips

Jump to bottom
EricYang edited this page Oct 8, 2021 · 13 revisions

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;
  1. text-overflow: ellipsis
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Sticky

  • 用法：容器要有height，overflow: scroll/auto; 子元素position: sticky;基于top, right, bottom, 和 left的值进行偏移。

  • 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

  • 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

getComputedStyle()

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);

// 它等价于
// let style = document.defaultView.getComputedStyle(elem1, null);

Clone this wiki locally