背景：
在项目开发过程中,超出内容区的文本需要省略（单行文本溢出隐藏 css实现），鼠标经过时 hover 显示出全部（如图1），对于未超出的鼠标经过时 hover 则不出现（如图2）。这里我们就需要获取文本的宽度和内容区域的宽度进行比较，然后再通过条件进行控制是否显示 popper
效果及相关代码如下：
图1：
图2：
// 获取获取字符串的宽度代码：
getTextWidth(textStr,fontSize = 14) {
// 创建一个临时的 div 标签
const div = document.createElement('div');
// 将文本追加到元素中
div.innerText = textStr;
// 设置字体大小
div.style.fontSize = `${fontSize}px`;
// 设置为绝对定位
div.style.position = 'absolute'
// 追加到 body 中
document.body.appendChild(div);
// 获取元素的宽度
const width = div.offsetWidth;
// 移除临时标签
document.body.removeChild(div);
return width
},
说明: 这里如果创建的是一个临时 行内元素（eg: span）,则不需要设置为绝对定位，（行内元素的宽度由其内容的的宽度决定）； 但是如果创建的是一个临时块级元素 (块级元素的宽度默认值为100%，高度默认值由元素内容决定)，设置元素的position为 absolute后会脱离文档流，默认宽度与子元素的宽度一致。（拓展: 如果想要使 absolute 以后的元素依然保持与父元素一样的宽度，有以下两种：1、width: 100% 2、left: 0; right: 0）
