我有一个跨度与动态数据在我的页面，与省略号风格。
.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
当前回答
这是一个香草JavaScript解决方案:
var cells = document.getElementsByClassName("cell"); for(const cell of cells) { cell.addEventListener('mouseenter', setTitleIfNecessary, false); } function setTitleIfNecessary() { if(this.offsetWidth < this.scrollWidth) { this.setAttribute('title', this.innerHTML); } } .cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px; border-style: solid; width: 120px; } <div class="cell">hello world!</div> <div class="cell">hello mars! kind regards, world</div>
其他回答
我有CSS类，它决定在哪里放省略号。在此基础上，我做以下操作(元素集可能不同，我写那些，使用省略号，当然它可以是一个单独的类选择器):
$(document).on('mouseover', 'input, td, th', function() {
if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
$(this).attr('title', $(this).val());
}
});
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
这就是我的解决办法，真是妙不可言!
$(document).on('mouseover', 'input, span', function() {
var needEllipsis = $(this).css('text-overflow') && (this.offsetWidth < this.scrollWidth);
var hasNotTitleAttr = typeof $(this).attr('title') === 'undefined';
if (needEllipsis === true) {
if(hasNotTitleAttr === true){
$(this).attr('title', $(this).val());
}
}
if(needEllipsis === false && hasNotTitleAttr == false){
$(this).removeAttr('title');
}
});
这是一个纯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;
}
