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内容超过宽度缩为三个点的更多相关文章

  1. table中td内容过长 省略号显示

    首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...

  2. 当Table中td内容为空时，显示边框的办法

    1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个    说明: ...

  3. table中td 内容超长 自动折行 （含字母数字文字）

    <table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...

  4. 表格td内容超出宽度显示... table-layout: fixed;

    td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...

  5. 当Table中td内容为空时，让它显示边框的办法

    1 在 table的css里面加 border-collapse:collapse; 在 td 的css里面加      empty-cells:show; border-collapse设置或检索表 ...

  6. span 文本内容超过宽度自动换行

    span{word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;over ...

  7. table中td内容过长自动换行

    table { table-layout:fixed; WORD-BREAK:break-all;}

  8. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  9. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

随机推荐

  1. PHP 导出微信公众号粉丝的方法

    PHP 导出微信公众号粉丝的方法 先 user/get 获取关注者列表 然后user/info 根据openid读取信息 以上方法认证的订阅号支持

  2. （Codeforce）The number of positions

    Petr stands in line of n people, but he doesn't know exactly which position he occupies. He can say ...

  3. [HTML] 学HTML写的第一第二个网页

    ①第一个网页 <h2>英雄联盟(电子竞技类游戏)</h2> <p><b>(英雄联盟)</b>(简称lol)是由美国<i>Roit ...

  4. nyoj 77-开灯问题 (倍数遍历)

    77-开灯问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:24 难度:1 题目描述: 有n盏灯,编号为1~n,第1个人把所有灯打开,第2个人按下所有编号为2 的倍 ...

  5. systemd概念和运行机制

    systemd概念 核心概念:单元 依赖关系 systemd事务 启动目标和运行级别 单元 早期CentOS版本中的服务管理脚本在CentOS7中被服务但源文件替换.系统初始化需要启动后台服务,需要完 ...

  6. 十、GAP

    1.1     背景 GAP(Generic Access Profile)位于主机协议栈的最顶层,用来定义BLE设备在待机或者连接状态中的行为,该Profile保证不同的Bluetooth产品可以互 ...

  7. ASP.NET Core +Highchart+ajax绘制动态柱状图

    一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...

  8. oracle内存占用过高和修改不当无法启动oracle实例的解决办法

    今天,在自己机器上装了oracle 12c,发现Oracle的服务Oracle RDBMS Kenel  Executable (OracleServiceORCL)占用内存高达5G,本人电脑内存才1 ...

  9. nginx-（三）基本模块1

    nginx常用模块介绍 ngx_http_access_module模块的配置(基于IP的访问控制) allow address | CIDR | unix: | all; deny address ...

  10. 第9场 E-All men are brothers（并查集）

    题目链接 题意:n个人,m次操作,每次操作使得两个人(x,y)成为朋友,朋友的关系是可以传递的,计算执行每次操作后,选择四个人两两都不是朋友的不同方案的数目. 数据范围:(n <= 100000 ...