溢出内容鼠标悬浮显示全部内容实现思路求教

Question

下面Idea编辑器左侧菜单的处理效果, 我也想要有类似的效果, 不知道怎么实现?
最好给出vue的实现方式.

超长内容显示不下时:

鼠标悬停后:

Answer 1

• 鼠标移入：

1. 获取文本内容
2. 生成一个span元素
3. 给span元素赋值获取到的文本
4. 将span元素append到父节点
5. 判断span元素宽度与原节点宽度比较
6. 如果span宽度大，说明文本溢出了，将span定位到指定位置显示(给父节点设置相对定位，获取原来节点offsetTop和offsetLeft，然后设置z-index控制效果)

• 鼠标移出：

清除span元素

Answer 2

p {
  width: 100px;
  white-space:nowrap;
  overflow: hidden;
}
p:hover {
  width: auto;
}