HTML -如何仅在激活省略号时显示工具提示
HTML -如何仅在激活省略号时显示工具提示
提问于 2011-03-29 23:19:00
我的页面中有一个带有动态数据的跨度，具有ellipsis样式。
.my-class
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 71px;
}<span id="myId" class="my-class"></span>document.getElementById('myId').innerText = "...";我想添加到此元素的工具提示与相同的内容，但我希望它只出现时，内容很长，省略号出现在屏幕上。
有什么办法可以做到吗？
当ellipsis被激活时，浏览器会抛出事件吗？
*浏览器: Internet Explorer
回答 12
Stack Overflow用户
发布于 2012-11-07 05:24:23
下面是一个使用内置省略号设置的方法，并在Martin Smith的注释的基础上添加title属性on-demand (使用jQuery)：
$('.mightOverflow').bind('mouseenter', function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$this.attr('title', $this.text());
}
});Stack Overflow用户
发布于 2015-10-30 03:11:18
这是一个纯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;
}Stack Overflow用户
发布于 2012-12-11 04:47:15
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());
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5474871
复制相关文章
相似问题
腾讯云开发者
