经典实践

常见图形、文本溢出等

一、三角形

思路：

• 宽高都设置成0

• border设置成透明，边框粗细即时三角形的边长

• 把要显示的边进行边框重置

二、文本溢出

单行：

要点：

• 定宽

• 不换行

• 超出隐藏

• 文本末尾加省略号

多行：

box-orient + line-clamp

三、判断元素是否到达可视区域

方式一：高度计算

原理：元素距离文档顶部的高度 < 页面滚动过的高度 + 浏览器可视高度

img.offsetTop < window.innerHeight + document.body.scrollTop;

方式二：借助IntersectionObserver

应用：

• 曝光埋点