[TimLinux] JavaScript table的td内容超过宽度缩为三个点
1. 思路
- CSS控制td内容自动缩为三个点
- JS控制鼠标悬浮显示td全部内容
2. 实现
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table/td自动隐藏内容</title>
<link rel="stylesheet" href="my.css" />
</head>
<body>
<table id="idMyTable">
<tr>
<td>这是一个正常显示的内容</td>
<td>这是一个自动隐藏超长文本内容的内容，剩下的内容将根据款冬自动隐藏，功能能够正常执行。</td>
</tr>
</table>
<script type="application/javascript" src="my.js"></script>
</body>
</html>
CSS代码：
table {
width: 400px;
border-collapse: collapse; /* 为表格设置合并边框模型 */
table-layout: fixed; /* 设置表格布局算法，只有设置这个值后面的td属性才有效 */
}
td {
border: 1px solid blue;
word-break: keep-all; /*在恰当的断字点进行换行 */
white-space: nowrap; /* 规定段落中的文本不进行换行 */
overflow: hidden; /* 当内容溢出元素框时发生的事情 */
text-overflow: ellipsis; /* 当文本溢出包含元素时发生的事情, ellipsis含义为省略号 */
}
JS代码：
window.onload = function () {
var allTds = document.getElementsByTagName('td');
for (var i = 0; i < allTds.length; i++) {
var td = allTds[i];
td.onmouseover = function (ev) {
if (this.clientWidth < this.scrollWidth) {
this.setAttribute('title', this.textContent);
}
};
td.onmouseleave = function (ev) {
this.removeAttribute('title');
};
}
};
3. 效果
[TimLinux] JavaScript table的td内容超过宽度缩为三个点的更多相关文章
- table中td内容过长 省略号显示
首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...
- 当Table中td内容为空时，显示边框的办法
1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个 说明: ...
- table中td 内容超长 自动折行 （含字母数字文字）
<table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...
- 表格td内容超出宽度显示... table-layout: fixed;
td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...
- 当Table中td内容为空时，让它显示边框的办法
1 在 table的css里面加 border-collapse:collapse; 在 td 的css里面加 empty-cells:show; border-collapse设置或检索表 ...
- span 文本内容超过宽度自动换行
span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;over ...
- table中td内容过长自动换行
table { table-layout:fixed; WORD-BREAK:break-all;}
- css控制table的td宽度
今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...
- table表格宽度固定，同时td内容过长也不会被撑开
table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}
随机推荐
- python函数的基本语法<三>
实参和形参: 定义函数括号里的一般叫形参 调用时括号里传递的参数一般叫实参 def students(age): print('my age is %s' % age) students(18) ag ...
- mysql数据库基本操作语句
1 更改字段名:change alter table student change column gradenews grade int(11); 2 增加字段和删除字段 alter table s ...
- Windows下mysql的下载和安装
下载: 1.下载地址:https://www.mysql.com/downloads/ 2.选择社区版:MySQL Community (GPL) Downloads » 3.MySQL Commun ...
- PHP 核心特性 - 匿名函数
提出 在匿名函数出现之前,所有的函数都需要先命名才能使用 function increment($value) { return $value + 1; } array_map('increment' ...
- LeetCode18. 四数之和
LeetCode18. 四数之和 给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值 ...
- nyoj 524-A-B Problem (java stripTrailingZeros, toPlainString)
524-A-B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: A+B问题早已经被大家所熟知了,是不是很无聊呢?现在大家来做一下 ...
- VLAN实验（1）Access接口
1.选择两台S3700的交换机,5台PC机,并按照下图链接好并填写IP,完成此拓扑图 2.由于现在我们还没有划分VLAN,这5台PC,还在同一个VLAN中,现在我们启动所有的设备,这是所有的主机应该是 ...
- 学习记录：《C++设计模式——李建忠主讲》4.“单一职责”模式
单一职责模式:在软件组件的设计中,如果责任划分的不清晰,使用继承得到的结果往往是随着需求的变化,子类急剧膨胀,同时充斥着重复代码,这时候的关键是划清责任. 典型模式:装饰模式(Decorator).桥 ...
- Condition对象以及ArrayBlockingQueue阻塞队列的实现（使用Condition在队满时让生产者线程等待, 在队空时让消费者线程等待）
Condition对象 一).Condition的定义 Condition对象:与锁关联,协调多线程间的复杂协作. 获取与锁绑定的Condition对象: Lock lock = new Reentr ...
- alpha week 2/2 Scrum立会报告+燃尽图 01
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9798 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...