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. Java 调用 Hbase API 访问接口实现方案

    HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Google文件 ...

  2. 每天一道算法题-leetcode136-只出现一次的数字

    前言 打卡第一天 2019.10.26日打卡 算法,即解决问题的方法.同一个问题,使用不同的算法,虽然得到的结果相同,但是耗费的时间和资源是不同的.这就需要我们学习算法,找出哪个算法更好. 大家都知道 ...

  3. 微信小程序（mpvue） wx.openSetting 无法调起设置页面

    在开发过程有个需要保存图片/视频到设备相册的业务,so easy~   巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~   btu.... ...

  4. SQL Server 2014：在修改表的内容时，提示“此单元格已更改，尚未将更改提交到数据库”，怎么处理？

    那一行上的属性为“不允许为null”的所有字段都填上对应信息,按回车键或者点击下一行任意一个单元格便会自动将更改的信息提交到数据库.

  5. springMVC-MyBatis-Mysql 环境下, 返回时间格式不是指定格式

    在数据库中的时间是: 比如: 2018-04-06:12;23:34. 但是mybatis查询出来以后是下面的格式. {"updatedTime":{"date" ...

  6. 【前端知识体系-CSS相关】Bootstrap相关知识

    1.Bootstrap 的优缺点? 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局) 缺点:定制流程较为繁琐,体积大 2.如何实现响应式布局? 原理:通过media query设置不同分 ...

  7. Python标准类型的分类

    Python有3种不同的模型可以帮助对基本类型进行分类,这些类型更好的理解类型之间的相互关系以及他们的工作原理. 1 存储模型    能保存单个字面对象的类型,称为原子或标量存储:    能保存多个对 ...

  8. 0MQ讲述多线程魔法

    为什么你想过的所有你所知道关于并发的事情,不是完全神经病的(Insane),就是假的(Bogus). 并发的定律,e=mc*c.这里并不是爱因斯坦的质能方程.而是 努力 = 代码规模 * (线程冲突碰 ...

  9. SQL Server设计三范式

    第一范式(1NF) (必须有主键,列不可分) 数据库表中的任何字段都是单一属性的,不可再分 create table aa(id int,NameAge varchar(100)) insert aa ...

  10. vue动态样式设置

    思路: 通过 v-bind:class="true ? style1 : style2 " 配合三元表达式完成样式的切换 具体实现 //return设置控制的参数 //有多个需要样 ...