hover出现tips的bug处理

最新推荐文章于 2022-11-25 01:00:00 发布

好好学前端

最新推荐文章于 2022-11-25 01:00:00 发布

阅读量340

点赞数

分类专栏： tooltip 文章标签： javascript react

本文链接：https://blog.csdn.net/weixin_42192909/article/details/111212559

版权

hover出现tips的bug处理

场景

引用的组件，当宽度显示不全时有打点显示，比如我先展示哈哈哈哈哈呼呼呼呼,但是宽度不够显示不全，会展示哈哈哈… ,hover上去会显示完整的句子。

出现的bug : 在火狐浏览器没有展示完全，但是hover上去并没有出现tips，该问题在谷歌上并没有复现

猜测可能是引用组件的问题，发现引用组件中是运用scrollWidth,以及clientWidth来比较进行判断的。针对它所使用的判定方法进行了验证.

模拟样式如下：

.expand-data-table {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding: 0 10px ;
}

模拟代码如下

import React from 'react'
import './index.scss'

const ExpandDataTable = (props: any) => {
  const handleMouse = (e: any) => {
    const { clientWidth,scrollWidth } = e.currentTarget
    console.log(clientWidth,scrollWidth)
  }
  return (
    <div onMouseEnter={handleMouse} className={'expand-data-table'}>
        111111dhiahiofi
    </div>
  )
  
}

export default ExpandDataTable

在谷歌上hover上去时，clientWidth为50，scrollWidth为121

在火狐hover上去时，clientWidth为50，scrollWidth为 111

修改左内边距为0时，谷歌展示为111，而火狐展示为101. 证明在火狐下右内边距并没有参与scrollWidth的计算。

经过测试我发现当指定样式为text-overflow为ellipsis时，在火狐上会出现问题。展示…了但是scrollWidth仍然等于clientWidth

以下为原生html的测试代码

<!DOCTYPE html>
<html lang

最低0.47元/天解锁文章

好好学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hover出现tips的bug处理

hover出现tips的bug处理场景引用的组件，当宽度显示不全时有打点显示，比如我先展示哈哈哈哈哈呼呼呼呼,但是宽度不够显示不全，会展示哈哈哈… ,hover上去会显示完整的句子。出现的bug : 在火狐浏览器没有展示完全，但是hover上去并没有出现tips，该问题在谷歌上并没有复现猜测可能是引用组件的问题，发现引用组件中是运用scrollWidth,以及clientWidth来比较进行判断的。针对它所使用的判定方法进行了验证. 模拟样式如下：.expand-data-
复制链接

扫一扫

专栏目录