我有一个跨度与动态数据在我的页面，与省略号风格。
.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
当前回答
我有CSS类，它决定在哪里放省略号。在此基础上，我做以下操作(元素集可能不同，我写那些，使用省略号，当然它可以是一个单独的类选择器):
$(document).on('mouseover', 'input, td, th', function() {
if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
$(this).attr('title', $(this).val());
}
});
其他回答
下面是一种使用内置省略号设置的方法，并根据Martin Smith的注释按需添加title属性(使用jQuery):
$('.mightOverflow').bind('mouseenter', function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$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'
});
}
});
这是一个纯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类，它决定在哪里放省略号。在此基础上，我做以下操作(元素集可能不同，我写那些，使用省略号，当然它可以是一个单独的类选择器):
$(document).on('mouseover', 'input, td, th', function() {
if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') {
$(this).attr('title', $(this).val());
}
});
这就是我最终基于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 );
