表格td内容过多时，td显示省略号，鼠标移入显示全部内容。
转自：https://blog.csdn.net/weixin_42193908/article/details/80405014
两种方式显示：
1.title方式显示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.tb{width:800px;font-size:12px;background:#6887D9}
.tb thead th{height:25px;background:#217AC4;color:white}
.tb tbody td{height:22px;background:white;padding-left:3px;}
.autocut {
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
</style>
</head>
<body>
<table class="tb" border="0" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column1</td>
<td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>
<td>Column3</td>
</tr>
<tr>
<td>Column1</td>
<td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>
<td>Column3</td>
</tr>
<tr>
<td>Column1</td>
<td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>
<td>Column3</td>
</tr>
</tbody>
</table>
</body>
</html>
2.切换class属性方式：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.li1 {
list-style:none;
width:100px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
margin-top:5px;
}
.li2{
list-style:none;
margin-top:5px;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
</head>
<body>
<ul>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">尽快了解了解可怜快捷链接里看见快乐建立</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">和国际环境来看看窘境看见了开发机构了解了空间</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">发电股份的合格两款发动机和旅客看了解了空间</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">发电股份的高科技了发动机来看发给大家了发动机来看</a></li>
</ul>
</body>
</html>
表格td内容过多时，td显示省略号，鼠标移入显示全部内容。的更多相关文章
- td文字过长部分显示，鼠标移动显示全部内容
只要在该td中加上title属性,鼠标移到这里就会看到全部内容, 在td中加上div,属性设置如下,就能显示宽度为200px的内容,大于则隐藏.代码如下: <td title="我是代 ...
- Div内部的内容超出部分显示省略号（仅仅只有一行内容）
效果如下:
- 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...
- IE7 -- 鼠标移入显示下拉框 不显示的问题 / 以及宽度问题
这个问题,真的是打击到我了,我一度不相信自己无法解决这个问题.但是我就是真的没有解决. 那么问题解决方案是: 第一 祖先级别有一个相对定位,父级再有一个定位,那么绝对定位显示出来的元素就会不显示. 第 ...
- angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框
首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- JS文本中间显示省略号
众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- css强制换行显示省略号之显示两行后显示省略号
1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...
随机推荐
- P1401 城市（30分，正解网络流）
题目描述 N(2<=n<=200)个城市,M(1<=m<=40000)条无向边,你要找T(1<=T<=200)条从城市1到城市N的路,使得最长的边的长度最小,边不能 ...
- Android学习——数据存储之文件存储
将数据存储到文件中并读取数据 1.新建FilePersistenceTest项目,并修改activity_main.xml中的代码,如下:(只加入了EditText,用于输入文本内容,不管输入什么按下 ...
- 【PostgreSQL-9.6.3】函数（3）--日期和时间函数
在PostgreSQL中,DATE.TIME.TIMESTAMP是三种不同的数据类型.DATE表示日期类型,格式为YYYY-MM-DD或YYYYMMDD:TIME表示时间类型,格式为hh:mi:ss: ...
- 【VB】时间戳转日期
DateAdd("s", TimeStamp / 1000, "1970-01-01 00:00:00")
- fiddler抓包 IOS11以上系统
想要使用fiddler对iphone X进行抓包,按照以前的配置方法,走一遍.还是抓不成,原来是因为IOS11操作系统中,安装完证书之后,还需要再手动信任证书才能正常抓包. 以下内容来自:https: ...
- 团体程序设计天梯赛-练习集-L1-037. A除以B
L1-037. A除以B 真的是简单题哈 —— 给定两个绝对值不超过100的整数A和B,要求你按照“A/B=商”的格式输出结果. 输入格式: 输入在第一行给出两个整数A和B(-100 <= A, ...
- 【转载】InputStreamReader和OutputStreamWriter 的区别和用法
一.InputStreamReader 用于将一个字节流中的字节解码成字符 , 用法如下: @Test public void Test19() throws Exception { InputStr ...
- Running to the End（Codeforces & AtCoder 百套计划）
...Reserved for the future... 仿照xxy dalao的CF&CC百套计划,做了一个Codeforces & AtCoder 百套计划,按这个速度刷下去,每 ...
- POJ2431-Expedition【优先队列+贪心】
题目大意:卡车每走一公里就消耗一单位的汽油,初始时给你p单位油,你要到达l距离的终点.其中路上有n个补给点可以加油,并且油箱容量无限大,问你最少可以停车几次. 思路:因为油箱无限大,所以我们可以这么认 ...
- 实体服务器安装centos7过程记录
一次在实体服务器安装centos 7的过程记录 第一次在实体服务器上面安装服务器(centos 7),在此记录安装过程中遇到的一些坑. 系统版本:CentOS Linux release 7.6.18 ...