首页 > web前端 > css教程 > 如何仅当 HTML 中的省略号处于活动状态时才显示工具提示?

如何仅当 HTML 中的省略号处于活动状态时才显示工具提示?

Mary-Kate Olsen
发布: 2024-11-06 08:27:02
原创
449 人浏览过

How Can I Display A Tooltip Only When Ellipsis Is Active in HTML?

确定工具提示显示的省略号激活

在 HTML 中,如果内容超出元素的指定宽度,省略号 (...) 可以自动应用,表示为被截断并替换为三个点的溢出文本。本文探讨如何仅在省略号处于活动状态时显示工具提示。

背景

考虑以下 HTML 片段:

<code class="html"><p>I have got a span with dynamic data in my page, with ellipsis style.</p>

<pre class="brush:php;toolbar:false">.my-class
{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;  
  width: 71px;
}
<span id="myId" class="my-class"></span>
document.getElementById('myId').innerText = "...";
登录后复制

在此示例中,“myId”范围内的内容将动态更新,并且当内容溢出指定宽度时激活省略号样式。

添加工具提示

要向此元素添加工具提示,我们可以利用“title”属性:

<code class="html"><span id="myId" class="my-class" title="Full Content"></span></code>
登录后复制

使工具提示仅显示省略号

但是,我们希望仅当内容足够长以激活省略号时才显示工具提示。为此,我们可以将 mouseenter 事件侦听器绑定到元素并动态添加“title”属性:

<code class="javascript">$('.mightOverflow').bind('mouseenter', function(){
    var $this = $(this);

    if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
        $this.attr('title', $this.text());
    }
});</code>
登录后复制

在此 JavaScript 代码中,我们检查元素的偏移宽度是否小于其滚动宽度,表明内容溢出。如果尚未设置“title”属性,我们将添加元素的全文作为工具提示。这可确保仅在激活省略号时显示工具提示。

以上是如何仅当 HTML 中的省略号处于活动状态时才显示工具提示?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板