css 设置表格/div内容超出时不显示全部 当内容超出时鼠标悬浮显示内容

css样式:

td>div{width:100emoverflow: hidden; text-overflow:ellipsis;white-space: nowrap; }

jQuery:

1. 这里我用的table框架，需要挂个代理，如果没需求可以直接用mouseover方法

2. 我的字体设置为12px，所以用width/12，看自己需求更改

$(function(){$("#table").delegate('td div','mouseover',function(){if ($(this)[0].offsetWidth/12 < $(this)[0].innerText.length){$(this).attr('title',$(this).context.innerText);}})})

截图费劲拍个照片…

这里为了方便直接给div加了个title来显示全部内容，如果追求样式需要自己设计个div来控制显示和隐藏，当然还要获取光标位置来更新div的top和left