列表中,js控制内容超出三行显示省略号并支持展开

问题描述

提示：这里描述项目中遇到的问题：

列表循环展示信息，超出三行需要显示省略号，并支持展开收起。

---

原因分析：

循环数组获取信息，创建span元素，再模拟真实文字的css情况，利用getBoundingClientRect()获取元素高度，判断与三行文字高度的大小，小于正常显示，大于就动态添加class实现超出显示省略号，并且显示下拉箭头

//循环列表数组 获取信息
arr.forEach((item) => {
    //创建span元素
    const dom = document.createElement('span');
    //模拟显示情况
    dom.style.display = 'inline-block';
    dom.style.lineHeight = '22px';
    dom.style.width = '632px';
    dom.style.fontSize = '14px';
    //需要添加break-word 不然纯数字 英文不会换行
    dom.style.wordBreak = 'break-word'
    //将文字 添加到span中
    dom.textContent = item.content;
    //将span添加到body中(会有点小坑)
    document.body.appendChild(dom);
    // js获取span高度
    const height = dom.getBoundingClientRect().height;
    dom.remove();
    //大于三排时
    if (height > 66) {//行高22  3行就是66
       this.$set(item, 'show', true);
       this.$set(item, 'showArrow', true);
    }
});

---

小坑：

刚开始我还没有设置span宽度，准备获取了宽度再和三倍真实宽度对比，一般开发过程中都打开了F12，我一般放右侧，导致body宽度被压缩，span添加到body后，自动换行了，导致判断怎么都不出现省略号， dom.remove()了，无法查找bug。

正常使用不会出现问题，后面还是设置了宽模拟了真的dom的情况，js获取高度去判断的。