[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;}
随机推荐
- docker项目——搭建飞机大战小游戏
项目2:搭建打飞机小游戏,验证数据持久化(最底下有链接) 第一步:拉取镜像 [root@localhost docker-image]# docker load < httpd_img.tar. ...
- js 把数组中每个元素的某个字段取出
方法一:map() let cities = [ {city:"北京",bOn:false}, {city:"上海",bOn:false}, {city:&qu ...
- 设计模式（Java语言）- 简单工厂模式
简单工厂模式有称为静态工厂模式,属于设计模式中的创建型模式.简单工厂模式通过对外提供一个静态方法来统一为类创建实例.简单工厂模式的目的是实现类与类之间解耦,其次是客户端不需要知道这个对象是如何被穿创建 ...
- MySql——创建数据表，查询数据，排序查询数据
参考资料:<Mysql必知必会> 创建数据表 在学习前首先创建数据表和插入数据.如何安装mysql可以看看上个博客https://www.cnblogs.com/lbhym/p/11675 ...
- flume安装和介绍
一.安装1.flume-ng-1.5.0-cdh5.3.6.tar.gz 下载链接:https://pan.baidu.com/s/1AWPGP2qnY6_VpYr_iSnJ3w 密码:tiog2.对 ...
- ASP.NET Core 3 使用原生 依赖注入 集成 AspectCore ，实现 AOP 功能
在NETCORE中可以使用AOP的方式有很多很多,包括国内优秀的开源框架asp.netcore同样可以实现AOP编程模式. IOC方面,个人喜欢net core 3自带的DI,因为他注册服务简洁优 ...
- Jquery 处理返回的 Json 数组
Jquery 处理返回的 Json 数组 <script> for (var i = 0; i < photos.length; ++ i) { console.log(photos ...
- Arduino 基于 ESP8266 配置WIFI模块
Arduino 基于 ESP8266 配置WIFI模块 使用ESP8266作为服务器,使用浏览器访问该服务器,从而控制LED灯 选择 [文件]->[示例]->[ESP8266WIFI]-& ...
- python：正则0
Python3 正则表达式特殊符号及用法(详细列表) 正则表达式的强大之处在于特殊符号的应用,特殊符号定义了字符集合.子组匹配.模式重复次数.正是这些特殊符号使得一个正则表达式可以匹配字符串集合而不只 ...
- 防火墙和SELinux
在/etc/sysconfig/selinux中修改SELINUX=disabled关闭SELinux 执行systemctl disable firewalld关闭防火墙 然后重启计算机