表格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 ...
随机推荐
- Burn Down Chart（2018.5.28~2018.6.3）
任务安排 (2018.6.2 更新——前端总进度) (2018.6.3 更新——后端燃尽图) 娄雨禛[前端部分] 曾子轩[后端部分+燃尽图] 前端 齐天扬+刘鼎乾:设计两组页面,只要求框架和简单的 c ...
- 【SQL】ROWNUM和ROWID
一.ROWNUM ROWNUM伪列是Oracle先查到结果集之后再加上去的一个伪列,这个伪列对符合条件的结果添加一个从1开始的序列号,并且序列号是从1开始增序排列的. SQL> select r ...
- vegas pro 15解决导入的视频和音频有噪声问题，亲测可行
中文步骤: 按住Shift->点击选项->首选项,松开Shift 点击右上角"内部"选项卡,在最下面的搜索栏输入SO4 找到第二项Enable So4 Compound ...
- CXF-JAX-RS开发（一）入门案例
一.简介 资源驱动.基于HTTP协议[按照标准指定URL,就可以访问数据]以XML|JSON格式传输数据. 二.quickstart 1.创建maven project[Packaging:jar] ...
- CNN结构：用于检测的CNN结构进化-分离式方法
前言: 原文链接:基于CNN的目标检测发展过程 文章有大量修改,如有不适,请移步原文. 参考文章:图像的全局特征--用于目标检测 目标的检测和定位中一个很困难的问题是,如何从数以万计的候选 ...
- OpenCV:OpenCV目标检测Adaboost+haar源代码分析
使用OpenCV作图像检测, Adaboost+haar决策过程,其中一部分源代码如下: 函数调用堆栈的底层为: 1.使用有序决策桩进行预测 template<class FEval> i ...
- Mac下php连接mysql数据库失败解决办法
通过phpmyadmin连接mysql成功,但是通过php连接数据库失败,执行如下php语句 ? 1 @mysql_connect("localhost","root&q ...
- BZOJ : [Usaco2013 Nov]Crowded 单调队列
正反两遍个来一次单调队列 DP 即可. Code: #include<cstdio> #include<deque> #include<algorithm> usi ...
- BZOJ 1060: [ZJOI2007]时态同步 树上问题 + 贪心
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
- Linux：只复制文件权限和所有者
在Linux上,怎么把一个文件的<权限和所有者>赋给另一个文件呢? chown命令可以设置所有者和用户组:chmod可以设置文件的权限.这两个命令都支持使用另一个文件做为引用(RFILE) ...