js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容

项目中遇到如果表格内容太多的话页面会很丑，所以想到给表格一个最大宽度之类的，当内容超出时用三个点代替超出的部分，当鼠标悬停时显示全部的信息，下面百度到两个案例，都可以实现：

1.在表格下面在添加一模一样的一行，先将其隐藏，等鼠标悬停时在显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">table {width: 100%;table-layout:fixed;}table tr {line-height: 25px;}table td {text-align:center;}.MHover{ white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor: pointer;}.MALL{padding:10px;border-radius: 5px;background: #B4CBED;}</style>
</head>
<body><table border="1" cellspacing="0"><tr><th>姓名</th><th>个性签名</th><th>性别</th></tr><tr><td>张国荣</td><td><div class="MHover">我就是我，是颜色不一样的烟火！</div><div class="MALL">我就是我，是颜色不一样的烟火！</div></td><td>男</td></tr></table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">// 表格内容超出，三个点，鼠标悬停显示$(document).ready(function () {$(".MALL").hide();console.log($('.MALL'));$(".MHover").mouseover(function (e) {$(this).next(".MALL").css({"position":"absolute","top":e.pageY+20,"left":e.pageX+20}).show();});$(".MHover").mousemove(function (e) {$(this).next(".MALL").css({ "color": "#fff", "position": "absolute", "opacity": "0.7", "top": e.pageY + 20, "left": e.pageX + 20});});$(".MHover").mouseout(function () {$(this).next(".MALL").hide();});});
</script>
</html>

2.不需要写重复的一行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格内容溢出省略号显示</title><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/layer.js"></script><style type="text/css">.contain { width:900px; margin: 15px auto; font-family: ‘Microsoft YaHei’; }table { width:100%; text-align: center; border:1px solid #e3e6e8; border-collapse: collapse; table-layout: fixed;display: table; }th,td { border: 1px solid #e3e6e8; height:38px; line-height: 38px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; }th { background-color: #189AD6; color:#fff; }.layui-layer { word-wrap: break-word; }</style></head>
<body><div class="contain"><table><thead><th>货币</th><th>本周收盘</th><th>上周收盘</th><th>涨跌</th><th>幅度</th></thead><tbody><tr><td>EURGBPfffffffffffffffffffffffffffffffffffffffffffffffffffffff</td><td>0.86333333333393</td><td>0.88945555555555555553</td><td>-2033333333333333331</td><td>-2.3166%</td></tr></tbody></table></div>
</body>
<script type="text/javascript">$(function () {$("td").on("mouseenter",function() {if (this.offsetWidth < this.scrollWidth) {var that = this;var text = $(this).text();console.log(text);layer.tips(text, that,{tips: 1,time: 2000});}});})
</script></html>

js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容相关推荐

CSS文字超出部分用省略号代替，js鼠标悬停时显示全部文本
需求: 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本. 文字超出部分用省略号代替 width:overflow: hi ...
如何截图鼠标右键时显示的内容和截屏电脑全屏快捷键
一.如何截图鼠标右键时显示的内容: 现在电脑上截图我一般用的都是QQ截图(Ctrl + Alt + A ),但使用中发现有些无法截图, 比如,鼠标右键菜单打开后,截图时鼠标右键菜单消失.因此我记录了下 ...
echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容
首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = {tooltip: {trigger: 'it ...
html里a标签的鼠标效果,html如何实现鼠标悬停提示A标签内容
这次给大家带来html的如何实现鼠标悬停提示A标签内容,html实现鼠标悬停提示A标签内容的注意事项有哪些,下面就是实战案例,一起来看一下. 鼠标经过悬停于对象时提示内容(title属性内容)换行排版 ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
css hover选择器悬停时显示隐藏的内容
css hover选择器悬停时显示隐藏的内容 ul li a name{position: absolute;text-align: center;color:white;visibility: h ...
表格中内容过多时采用省略号，鼠标移上去显示全部内容
①设置省略: table td {white-space: nowrap;//规定段落中的文本不进行换行overflow: hidden;//内容会被修剪,并且其余内容是不可见的.text-overf ...
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单效果图: 一级菜单: 鼠标停留时的二级菜: ...
el-table单元格内容较多时隐藏，鼠标hover时显示并且显示的内容可以换行 el-table提示框样式优化
目录一.el-table内容较多时隐藏,hover时换行显示二.总结一.el-table内容较多时隐藏,hover时换行显示 1.在需要隐藏的列el-table-column中加上属性 :s ...

js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容

js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容相关推荐

最新文章

热门文章