jquery 实现超出部分隐藏,鼠标移动上显示全部文字

jquery 实现超出部分隐藏,鼠标移动上显示全部文字

css

#tooltipdiv {

position: absolute;

border: 1px solid #333;

background: #f7f5d1;

padding: 3px 3px 3px 3px;

color: #333;

display: none;

}

.divmatnrdesc{

width:100px;overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

<div class='divmatnrdesc'>texxxxxxxxx你好,有你就好!有你真好</div>

jquery

$('div.divmatnrdesc').live('mouseover', function(e) {

_text=$(this).text();

_tooltip = "<div id='tooltipdiv'><font style='font-size:26px'> "+_text+"</font></div>";

$("body").append(_tooltip);

$("#tooltipdiv").show();

$("#tooltipdiv")

.css({

"top": (e.pageY+10) + "px",

"left": (e.pageX +10) + "px"

}).show("fast");

});

$('div.divmatnrdesc').live('mouseout', function(e) {

$("#tooltipdiv").remove();

});

$('div.divmatnrdesc').live('mousemove', function(e) {

$("#tooltipdiv")

.css({

"top": (e.pageY+10 ) + "px",

"left": (e.pageX+10) + "px"

}).show();

});

显示效果