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. [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询

    目录 [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询 [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询 [LINQ2Dapp ...

  2. IDEA中WEB项目本地调试和发布的配置分开配置

    一个Web项目,开发的时候设置了一些本地内容,比如IP地址,还有本地目录等.开发完成后,要发布到服务器上时,这些本地相关的配置,就需要配置成服务器上IP或目录. 原先的做法就是部署打包的时候,把相关的 ...

  3. SqlServer2005 查询 第一讲 计算列

    数据库查询[最重要且在数据库中难度最大] 声明一下我这里用的数据库样例是郝斌老师的(scott库) 我尽最大努力把复杂的问题简单化,方便理解,希望我写的东西能够帮助到你们 有些复杂的东西我我用自己的方 ...

  4. CMake 常用函数记录

    1.cmake_minunum_required(VERSION 2.6) #cmake 最低要求版本号 2.PROJECT(projectname [CXX] [C] [Java]) #这个指令隐式 ...

  5. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  6. 力扣（LeetCode）验证回文串 个人题解（C++）

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  7. C语言1博客作业01

    1 你对软件工程专业或者计算机科学与技术专业了解是怎样? 主修大数据技术导论.数据采集与处理实践(Python).Web前/后端开发.统计与数据分析.机器学习.高级数据库系统.数据可视化.云计算技术. ...

  8. 你的文章里为什么不放源码Github链接了

    "你的文章里为什么不放源码Github链接了?",一个读者这么问我 我把这张图发给了他,这是我之前放文章中Demo源码的Github仓库 他一脸疑惑,问我怎么了 经常使用Githu ...

  9. 万恶之源-python的部分内容

    1.字符串格式化输出 ​ %占位符: ​ 声明占位的类型%s--字符串 %d%i--整型 %%转义 成为普通的% %s ,%d, %% msg = '%s,学习进度5%%' print(msg%(in ...

  10. PostGIS mysql_fdw操作日志（留观）

    #####Linux终端操作命令记录,留做自己后面研究,绿色部分为成功部分 错误: 服务器"mysql_server" 不存在postgres=# create user mapp ...