JSP只展示3行, 鼠标放上展示所有
<span class="operate3"> ${notices}</span>
.operate3 {
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
$(".operate3").each(function (b) {
this.title = $(".operate3").text();
if (this.title) {
var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
$(this).mouseover(function (d) { //鼠标移上事件
this.title = "";
$("body").append('<div id="tooltip" style="z-index:100000;width:400px;height:200px;background-color:#efe6e6;position:absolute;padding: 0.5rem">' + c + "</div>"); //创建提示框,添加到页面中
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px",
opacity: "1"
}).show(250) //设置提示框的坐标,并显示
}).mouseout(function () { //鼠标移出事件
this.title = c; //重新设置title
$("#tooltip").remove() //移除弹出框
}).mousemove(function (d) { //跟随鼠标移动事件
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px"
})
})
}
})