我有一个跨度与动态数据在我的页面，与省略号风格。
.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());
});
其他回答
如果你想单独使用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，还有比这更优雅的解决方案。
这就是我所做的。大多数工具提示脚本要求您执行存储工具提示的函数。这是一个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());
});
上面的解决方案对我都没用，但我想出了一个很棒的解决方案。人们犯的最大错误是在页面加载时在元素上声明所有3个CSS属性。你必须动态添加这些样式+工具提示当且仅当你想要一个椭圆的跨度比它的父宽。
$('table').each(function(){
var content = $(this).find('span').text();
var span = $(this).find('span');
var td = $(this).find('td');
var styles = {
'text-overflow':'ellipsis',
'white-space':'nowrap',
'overflow':'hidden',
'display':'block',
'width': 'auto'
};
if (span.width() > td.width()){
span.css(styles)
.tooltip({
trigger: 'hover',
html: true,
title: content,
placement: 'bottom'
});
}
});
我创建了一个jQuery插件，使用Bootstrap的工具提示，而不是浏览器内置的工具提示。请注意，这还没有测试与旧的浏览器。
JSFiddle: https://jsfiddle.net/0bhsoavy/4/
$.fn.tooltipOnOverflow = function(options) {
$(this).on("mouseenter", function() {
if (this.offsetWidth < this.scrollWidth) {
options = options || { placement: "auto"}
options.title = $(this).text();
$(this).tooltip(options);
$(this).tooltip("show");
} else {
if ($(this).data("bs.tooltip")) {
$tooltip.tooltip("hide");
$tooltip.removeData("bs.tooltip");
}
}
});
};
下面是另外两个纯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>
