我有一个跨度与动态数据在我的页面，与省略号风格。
.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来做这件事，我会做下面的事情。给span一个id属性(这样可以很容易地从DOM中检索到它)，并将所有内容放在一个名为'content'的属性中:
<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>
然后，在javascript中，您可以在元素插入DOM后执行以下操作。
var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
document.getElementById("myDataId").setAttribute('title', elemContent);
}
当然，如果使用javascript将span插入到DOM中，则可以在插入之前将内容保存在变量中。这样就不需要span上的content属性了。
如果您想使用jQuery，还有比这更优雅的解决方案。
其他回答
如果你想单独使用javascript来做这件事，我会做下面的事情。给span一个id属性(这样可以很容易地从DOM中检索到它)，并将所有内容放在一个名为'content'的属性中:
<span id='myDataId' style='text-overflow: ellipsis; overflow : hidden;
white-space: nowrap; width: 71;' content='{$myData}'>${myData}</span>
然后，在javascript中，您可以在元素插入DOM后执行以下操作。
var elemInnerText, elemContent;
elemInnerText = document.getElementById("myDataId").innerText;
elemContent = document.getElementById("myDataId").getAttribute('content')
if(elemInnerText.length <= elemContent.length)
{
document.getElementById("myDataId").setAttribute('title', elemContent);
}
当然，如果使用javascript将span插入到DOM中，则可以在插入之前将内容保存在变量中。这样就不需要span上的content属性了。
如果您想使用jQuery，还有比这更优雅的解决方案。
我们需要检测是否真的应用了省略号，然后显示一个工具提示来显示全文。仅仅比较“这个”是不够的。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/
这就是我的解决办法，真是妙不可言!
$(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');
}
});
下面是一种使用内置省略号设置的方法，并根据Martin Smith的注释按需添加title属性(使用jQuery):
$('.mightOverflow').bind('mouseenter', function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$this.attr('title', $this.text());
}
});
我有CSS类，它决定在哪里放省略号。在此基础上，我做以下操作(元素集可能不同，我写那些，使用省略号，当然它可以是一个单独的类选择器):
$(document).on('mouseover', 'input, td, th', function() {
if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
$(this).attr('title', $(this).val());
}
});
