文本超出显示点点点，弹框显示完整内容

Janice_97

于 2023-04-23 18:03:23 发布

阅读量387

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Janice_97/article/details/130286352

版权

通过比较元素的scrollWidth和offsetWidth来决定是否显示tooltip。当内容宽度超过元素宽度时，设置tooltip并显示；否则，移除tooltip。这种方法避免了未超出宽度时的不必要显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文使用jq+bootstrap的tootip组件

主要是用到scrollWidth 和offsetWidth的对比

当 scrollWidth > offsetWidth 时，tootip出现

否则去掉tootip，就不会出现没超出宽度也会悬浮显示的情况

<p class="textOver" data-toggle="tooltip" data-placement="bottom" >

css

.textOver{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

 // 超出显示点点点
          $('.textOver').each(function () {
            var textOverItem = $(this)
            if (textOverItem[0].scrollWidth > textOverItem[0].offsetWidth) {
              // 超出宽度
              textOverItem.css('cursor', 'pointer')
              textOverItem.attr('data-original-title', textOverItem[0].innerText)
            } else {
              // 没有超出宽度
              textOverItem.removeAttr('data-original-title') // 删除该属性
            }
          })