我的页面中有一个带有动态数据的跨度，带有ellipsis样式。
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}
<span id="myId" class="my-class"></span>
document.getElementById('myId').innerText = "...";我想添加具有相同内容的元素工具提示，但我希望它仅在内容很长并且省略号出现在屏幕上时才出现。
有什么办法吗？
浏览器在ellipsis激活时是否抛出事件？
*浏览器：Internet Explorer
这是一种使用内置省略号设置的方法，并title根据 Martin Smith 的评论按需添加属性（使用 jQuery）：
$('.mightOverflow').bind('mouseenter', function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$this.attr('title', $this.text());
}
});
这是一个纯 CSS 解决方案。不需要 jQuery。它不会显示工具提示，而是会在鼠标悬停时将内容扩展到其全长。
如果您的内容被替换，效果会很好。这样您就不必每次都运行 jQuery 函数。
.might-overflow {
text-overflow: ellipsis;
overflow : hidden;
white-space: nowrap;
}
.might-overflow:hover {
text-overflow: clip;
white-space: normal;
word-break: break-all;
}
这是另外两个纯 CSS 解决方案：
.overflow {
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.overflow:hover {
overflow: visible;
}
.overflow:hover span {
position: relative;
background-color: white;
box-shadow: 0 0 4px 0 black;
border-radius: 1px;
}<div>
<span class="overflow" style="float: left; width: 50px">
<span>Long text that might overflow.</span>
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>.wrap {
position: relative;
}
.overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events:none;
}
.overflow:after {
content:"";
display: block;
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 15px;
z-index: 1;
border: 1px solid red; /* for visualization only */
pointer-events:initial;
}
.overflow:hover:after{
cursor: pointer;
}
.tooltip {
/* visibility: hidden; */
display: none;
position: absolute;
top: 10;
left: 0;
background-color: #fff;
padding: 10px;
-webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.5s ease;
}
.overflow:hover + .tooltip {
/*visibility: visible; */
display: initial;
transition: opacity 0.5s ease;
opacity: 1;
}<div>
<span class="wrap">
<span class="overflow" style="float: left; width: 50px">Long text that might overflow</span>
<span class='tooltip'>Long text that might overflow.</span>
</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae perspiciatis accusantium quas aut explicabo ab. Doloremque quam eos, alias dolore, iusto pariatur earum, ullam, quidem dolores deleniti perspiciatis omnis.
</div>uosɐſ 的回答从根本上是正确的，但您可能不想在 mouseenter 事件中这样做。每次将鼠标悬停在元素上时，它都会进行计算以确定是否需要它。除非元素的大小发生变化，否则没有理由这样做。
最好在将元素添加到 DOM 后立即调用此代码：
var $ele = $('#mightOverflow');
var ele = $ele.eq(0);
if (ele.offsetWidth < ele.scrollWidth)
$ele.attr('title', $ele.text());
或者，如果您不知道它是何时添加的，则在页面加载完成后调用该代码。
如果您需要使用多个元素来执行此操作，那么您可以为它们提供所有相同的类（例如“mightOverflow”），并使用此代码来更新它们：
$('.mightOverflow').each(function() {
var $ele = $(this);
if (this.offsetWidth < this.scrollWidth)
$ele.attr('title', $ele.text());
});
这是我的 jQuery 插件：
(function($) {
'use strict';
$.fn.tooltipOnOverflow = function() {
$(this).on("mouseenter", function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).attr('title', $(this).text());
} else {
$(this).removeAttr("title");
}
});
};
})(jQuery);
用法：
$("td, th").tooltipOnOverflow();
编辑：
我已经为这个插件做了一个要点。 https://gist.github.com/UziTech/d45102cdffb1039d4415