table中td文字超出长度用省略号隐藏超出内容,鼠标点击内容全部显示
1,设置css样式
<style>
table {
width: 100%;
float: left;
table-layout:fixed;
width:600px;
border:1px solid #ccc;
}
table tr {
line-height: 25px;
border:1px solid #ccc;
}
table td {
border:1px solid #ccc;
text-align:center;
}
.MHover{
border:1px solid #ccc;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
</style>
2,js设置click和mousemove和mouseout事件
<script>
$(document).ready(function () {
$(".MALL").hide();
$(".MHover").click(function (e) {
$(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
});
$(".MHover").mousemove(function (e) {
$(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });
});
$(".MHover").mouseout(function () {
$(this).next(".MALL").hide();
});
});
</script>
3,HTML内容,在td中新增两个div,两个div中的内容必须一致。
<table>
<tr>
<th>姓名</th>
<th>个性签名</th>
<th>性别</th>
</tr>
<tr>
<td>狗子</td>
<td>
<div class="MHover">嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈</div>
<div class="MALL">嘻嘻嘻嘻嘻哈哈12345上山打老虎嘻嘻嘻嘻嘻哈哈</div>
</td>
<td>男</td>
</tr>
</table>
转载于:https://www.cnblogs.com/cqj98k/p/11468736.html
table中td文字超出长度用省略号隐藏超出内容,鼠标点击内容全部显示相关推荐
- td 超出宽度隐藏_table中td文字超出长度用省略号隐藏超出内容,鼠标点击内容全部显示...
1,设置css样式 table { width: 100%; float: left; table-layout:fixed; width:600px; border:1px solid #ccc; ...
- htmltd文本自动换行,完美解决table中td里面的内容自动换行
完美解决table中td里面的内容自动换行2018-08-03 11:50 对于将td里面的内容自动换行,在很久以前就遇到的了,但是一直没有完美的解决. 今天要打印一个报表,有一列中的内容太长,将ta ...
- CSS文字超出部分用省略号代替,js鼠标悬停时显示全部文本
需求: 宽度为百分比,随浏览器变化而变化,当窗口变小到一定程度,文字超出部分用省略号代替,当文字出现省略号,需要鼠标悬停时显示全部文本. 文字超出部分用省略号代替 width:overflow: hi ...
- 文本超出长度用用省略号显示
div { width: 200px; height: 150px; background-color: pink; margin: 100px auto; /* 长单词和长数字,不会强行中断换行,默 ...
- PHP 字符串超出长度用省略号,PHP字符串截取长度自定义方法cut_带省略号
我们下面就来介绍一下如何通过PHP自定义函数来截取我们想要截取的字符长度,超出部分用省略号代替或者隐藏. 字符串截取方法://截取字符串长度 function cut($Str, $Length,$m ...
- 表格中td限宽溢出以省略号代替
table.ms-listviewtable {table-layout:fixed;width: 100%; } table.ms-listviewtable td[role="gridc ...
- JAVA导出excel表格标题加粗,【excle特定文字加粗】java如何设置excel单元格中部分文字加粗 例如:标题(加粗): 内容(不加粗)...
java如何设置excel单元格中部分文字加粗 例如:标题(加粗): 内容(不加粗) HSSFCellStyle style = (HSSFCellStyle) wb.createCellStyle( ...
- 表格(table)中td根据内容长度自动换行
在一些前端的demo中,我们经常会用到表格(table).因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些.但是我们会遇到一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列 ...
- matlab table中的文字转string_Table数据结构及应用--MATLAB 基础篇
正月里都是年,先给大家云拜年,祝大家在新的一年里身体健康,事业有成,家庭幸福 1.Table来源 在工程上面,数据多为表格形式,其特点列与列之间存在数据类型不同,而每一列的数据类型相同.并且每一列或者 ...
最新文章
- 图片1---前馈神经网络+反向传播神经网络
- 【收藏】为什么在Scala中可以在运行时将AnyVal转换为AnyRef?AnyVal转换为AnyRef
- python均值滤波_opencv+python实现均值滤波
- asp 退出登录修改cookie能进入后台_深入浅出让你理解跨域与SSO单点登录原理与技术...
- 计算机教师资格考试试题,全国教师资格考试信息技术练习题(二)
- 线程池优化之充分利用线程池资源
- 会话技术——Cookie和Session
- YEDDA使用方法 命名实体识别
- 计算机专业的八字,生辰八字五行计算器
- 读书笔记:《结构思考力》基于目标定主题
- 正宇丨青松气质 红梅品格
- 佳能(Canon)打印机初始化备忘录
- PTA_拯救007 (25 分)【简单DFS+特判】
- html css inherit,CSS 继承 inherit属性的方法
- From Big to Small
- pybullet机器人仿真环境搭建 1.安装pybullet,测试官方示例,基础环境搭建
- bldc不同载波频率_有刷CD电机好用还是无刷BLDC电机好用?该选那个?
- matlab语言学习笔记(一)
- Activiti 7流程跳转
- 1,创建student和score表
热门文章
- 英语语法公式100例
- 平衡二叉排序树--调整方法快速记忆方法(渣男丢妻弃子法)
- zabbix proxy 的搭建流程【物理机】
- 移动端,JS判断滑到页面顶部下滑进行操作
- 天魔 The Omen
- 火箭还是飞机?——DevOps 的两种模式
- PFP:面向材料发现的通用神经网络
- Python3 解决编码问题: `UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position 10: ille
- 《英雄无敌 V》初次接触!
- Win11安装KB5013943导致应用程序崩溃错误代码0xc0000135