HTML – 如何在省略号激活时显示工具提示
我的页面中包含省略号的dynamic数据。 含义：
<span style='text-overflow: ellipsis; overflow : hidden; white-space: nowrap; width: 71;'>${myData}</span> 我想添加到相同的内容（title =“$ {myData}”）这个元素工具提示，但我希望它只出现在内容很长，省略号出现在屏幕上。
有没有办法做到这一点？
一个方向 – 当浏览器（在我的情况下IE）绘制省略号 – 它是否会抛出一个事件呢？
下面是一个使用内置省略号设置的方法，并在Martin Smith的评论的基础上添加了title属性（使用jQuery）：
$('.mightOverflow').bind('mouseenter', function(){ var $this = $(this); if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){ $this.attr('title', $this.text()); } });
uosɐs的回答基本上是正确的，但是你可能不希望在mouseenter事件中做到这一点。 这将导致它进行计算以确定是否需要，每次将鼠标hover在元素上。 除非元素的大小在变化，否则没有理由这样做。
在元素被添加到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()); });
这是一个纯粹的CSS解决scheme。 不需要jQuery。 它不会显示工具提示，而只是将鼠标hover时的内容展开为全长。
如果您的内容被replace，效果很好。 那么你不必每次都运行一个jQuery函数。
.might-overflow { text-overflow: ellipsis; overflow : hidden; white-space: nowrap; } .might-overflow:hover { text-overflow: clip; white-space: normal; word-break: break-all; }
这是我的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
我们需要检测是否应用了省略号，然后显示工具提示来显示全文。 仅仅比较“ this.offsetWidth < this.scrollWidth ”是不够的，因为元素几乎只保留其内容，而只剩下一两个像素的宽度，特别是全angular中文/日文/韩文字符的文本。
这里是一个例子： http : //jsfiddle.net/28r5D/5/
我find了一种改进省略号检测的方法：
- 首先比较“
this.offsetWidth < this.scrollWidth”，如果失败则继续步骤＃2。 - 暂时将css样式切换为{'overflow'：'visible'，'white-space'：'normal'，'word break'：'break-all'}。
- 让浏览器重新布局。 如果发生文字包装，元素会扩大其高度，这也意味着需要省略号。
- 还原css风格。
这是我的改进： http : //jsfiddle.net/28r5D/6/
如果你想完全使用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将跨度插入到DOM中，则可以在插入之前将内容保留在variables中。 这样你就不需要跨度上的内容属性。
如果你想使用jQuery，有比这更优雅的解决scheme。
这就是我所做的。 大多数工具提示脚本要求您执行一个存储工具提示的函数。 这是一个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(); });
我有“什么时候”，所以“setupTooltip”函数不会执行，直到所有标题已被更新。 用你的工具提示functionreplace“setupTooltip”，用你想检查的元素replace*。 *如果你离开的话，将全部通过它们。
如果您只是想使用浏览器工具提示来更新标题属性，则可以简化为：
$('*').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()); });
上面的解决scheme都没有为我工作，但我想出了一个很好的解决scheme。 人们犯的最大的错误是在页面加载时在元素上声明了所有3个CSS属性。 你必须添加这些样式+工具提示dynamicIF和ONLY如果你想要一个椭圆的跨度比它的父母更宽。
$('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类，它决定在哪里把省略号。 基于这一点，我做了以下（元素集可以是不同的，我写这些，省略号使用，当然它可以是一个单独的类select器）：
$(document).on('mouseover', 'input, td, th', function() { if ($(this).css('text-overflow') && typeof $(this).attr('title') === 'undefined') { $(this).attr('title', $(this).val()); } });
我创build了一个使用Bootstrap的工具提示而不是浏览器的内置工具提示的jQuery插件。 请注意，这还没有用旧的浏览器进行testing。
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"); } } }); };
蜘蛛侠！ 我自己也有同样的问题。 浏览器似乎不知道它的文本被截断。 所有的DOM属性都不显示它的踪迹。
当然你可以改变溢出到可见，测量宽度，然后返回到溢出隐藏然后比较。 这是一个丑陋的解决scheme，对我来说这是不现实的，因为我有屏幕上的数据负载，我不会循环通过他们所有。 粗略的代码:(恶劣和浪费）
for(elem in group){ elem.style.overflow = 'visible'; var originalWidth = elem.offsetWidth; elem.style.overflow = 'hidden'; if(elem.offsetWidth > originalWidth) elem.title = elem.innerHTML; }
如果你有更多的东西，更less的“斑点”请让我们知道。
你可以用另一个跨度包围跨度，然后简单地testing原始/内部跨度的宽度是否大于新的/外部跨度的宽度。 请注意，我可能会说 – 这大致是基于我在td内部span情况，所以我实际上并不知道它是否能够span内的span 。
这里虽然是我的代码，可能会发现自己在类似于我的位置; 即使它是在一个angular度的背景下，我仍然不加修改地复制/粘贴它，我不认为这会降低可读性和基本概念。 我把它编码为一种服务方法，因为我需要将它应用于多个地方。 我一直在传递的select器是一个类匹配多个实例的select器。
CaseService.applyTooltip = function(selector) { angular.element(selector).on('mouseenter', function(){ var td = $(this) var span = td.find('span'); if (!span.attr('tooltip-computed')) { //compute just once span.attr('tooltip-computed','1'); if (span.width() > td.width()){ span.attr('data-toggle','tooltip'); span.attr('data-placement','right'); span.attr('title', span.html()); } } }); }
