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

• Z时代
• 2024-01-10
• 分类：技术分享

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

超长内容显示不下时:

鼠标悬停后:

回答

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

• 鼠标移入：

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

• 鼠标移出：

清除span元素

以上是 溢出内容鼠标悬浮显示全部内容实现思路求教 的全部内容， 来源链接： utcz.com/a/39310.html