2013-10-02 56 views
6

我的下一个DIV:显示工具提示只有当省略号活跃

<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%> 

我怎么能显示只有省略号是活动的提示?

我觉得这个功能

function isEllipsisActive(e) { 
    return (e.offsetWidth < e.scrollWidth); 
} 

但我不知道如何使用它知道我用JSP和Struts

+0

既然你设置当_would_溢出时将被削减的内容,你不会再有任何溢出,你可以检查...你必须这样做_before_应用溢出:隐藏。 – CBroe

+0

[HTML - 如何在显示省略号时激活工具提示](http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is - 激活) –

回答

13

尝试是这样的:

Working DEMO
Working DEMO - with tooltip

$(function() { 
    $('div').each(function(i) { 

     if (isEllipsisActive(this)) 
      //Enable tooltip 
     else 
      //Disable tooltip 
    }); 
}); 

function isEllipsisActive(e) { 
    return (e.offsetWidth < e.scrollWidth); 
} 
+0

我有一个愚蠢的问题 $(功能...)我应该把它放在哪里? – junior

+0

'$(document).ready'我猜。 –

+0

如何用TD代替DIV做同样的事情?你能举一个有关它的实例吗? – smartmouse

0

对于任何人使用qtip(正在流行)。首先,为每个溢出元素添加一个类。

<span class="ellipsis-text">Some very long text that will overflow</span> 

然后,使用jQuery选择来选择多个这样的元素,并在你的元素,例如应用qTip插件(或想到的任何其他提示):

$('.ellipsis-text').each(function() { 
    if (this.offsetWidth < this.scrollWidth) { 
     $(this).qtip({ 
      content: { 
       text: $(this).text() 
      }, 
      position: { 
       at: 'bottom center', 
       my: 'top center' 
      }, 
      style: { 
       classes: 'qtip-bootstrap', //Any style you want 
      } 
     }); 
    } 
});