我有一个跨度与动态数据在我的页面，与省略号风格。
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}
<span id="myId" class="my-class"></span>
document.getElementById('myId').innerText = "...";我想在这个元素的工具提示中添加相同的内容，但我希望它只在内容较长且省略号出现在屏幕上时才会出现。 有什么办法可以做到吗? 当省略号被激活时，浏览器是否抛出一个事件?
*浏览器:Internet Explorer
当前回答
这就是我所做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个jQuery示例:
$.when($('*').filter(function() {
return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
$(this).attr('title', $(this).text());
}
})).done(function(){
setupTooltip();
});
如果你不想检查css的省略号，你可以这样简化:
$.when($('*').filter(function() {
return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
$(this).attr('title', $(this).text());
})).done(function(){
setupTooltip();
});
我在它周围加上了“when”，以便“setupTooltip”函数在所有标题更新之前不会执行。将"setupTooltip"替换为你的工具提示函数，*替换为你想检查的元素。如果你留下它，*会把它们都看完。
如果你只是想用浏览器的工具提示更新标题属性，你可以简化如下:
$('*').filter(function() {
return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
$(this).attr('title', $(this).text());
}
});
或不检查省略号:
$.when($('*').filter(function() {
return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
$(this).attr('title', $(this).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
我们需要检测是否真的应用了省略号，然后显示一个工具提示来显示全文。仅仅比较“这个”是不够的。offsetWidth < this。scrollWidth"当元素几乎包含了它的内容，但宽度只多了一到两个像素，特别是对于全宽的中文/日语/韩语字符的文本。
这里有一个例子:http://jsfiddle.net/28r5D/5/
我发现了一种改进省略号检测的方法:
“这相比较。offsetWidth < this。首先，如果失败，继续步骤#2。 暂时切换css样式为{'overflow': 'visible'， 'white-space': 'normal'， 'word-break': 'break-all'}。 让浏览器做中继布局。如果发生换行，元素将扩展其高度，这也意味着需要省略号。 恢复css样式。
以下是我的改进:http://jsfiddle.net/28r5D/6/
这就是我所做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个jQuery示例:
$.when($('*').filter(function() {
return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
$(this).attr('title', $(this).text());
}
})).done(function(){
setupTooltip();
});
如果你不想检查css的省略号，你可以这样简化:
$.when($('*').filter(function() {
return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
$(this).attr('title', $(this).text());
})).done(function(){
setupTooltip();
});
我在它周围加上了“when”，以便“setupTooltip”函数在所有标题更新之前不会执行。将"setupTooltip"替换为你的工具提示函数，*替换为你想检查的元素。如果你留下它，*会把它们都看完。
如果你只是想用浏览器的工具提示更新标题属性，你可以简化如下:
$('*').filter(function() {
return $(this).css('text-overflow') == 'ellipsis';
}).each(function() {
if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
$(this).attr('title', $(this).text());
}
});
或不检查省略号:
$.when($('*').filter(function() {
return (this.offsetWidth < this.scrollWidth && !$(this).attr('title'));
}).each(function() {
$(this).attr('title', $(this).text());
});
这就是我最终基于https://stackoverflow.com/a/13259660/1714951所做的，并在元素不再溢出时添加title属性的删除。这是纯JS (ES6)，使用事件委托的性能(当使用几个元素与同一类)和保护子句的可读性:
// You may want to change document by an element closer to your target
// so that the handler is not executed as much
document.addEventListener( 'mouseenter', event => {
let eventTarget = event.target;
// This could be easily applied to text-truncate instead of my-class if you use bootstrap
if ( !eventTarget.classList?.contains( 'my-class' ) ) {
return;
}
if ( eventTarget.offsetWidth < eventTarget.scrollWidth ) {
eventTarget.setAttribute( 'title', eventTarget.innerText );
return;
}
eventTarget.removeAttribute( 'title' );
}, true );
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());
});
