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. SSM整合案例--用户登录

    实现用户登录案例,并进行非法拦截 实现当用户未登录时,无法跳转到出登录页面以外的任何页面,拦截用户仍在登陆页面:当用户登录成功即可跳转到其他页面 (1)导入依赖 <!-- https://mvn ...

  2. JavaScript 运行原理

    i{margin-right:4px;margin-top:-0.2em}.like_comment_tips .weui-icon-success{background:transparent ur ...

  3. PHP队列的实现详细操作步骤

    队列是一种特殊的线性表,它只允许在表的前端,可以称之为front,进行删除操作:而在表的后端,可以称之为rear进行插入操作.队列和堆栈一样,是一种操作受限制的线性表,和堆栈不同之处在于:队列是遵循“ ...

  4. 如何基于 PHP-X 快速开发一个 PHP 扩展

    0x01 起步 PHP-X本身基于C++11开发,使用cmake进行编译配置.首先,你需要确定所有依赖项已安装好.包括: gcc-4.8 或更高版本 PHP7.0 或更高版本,需要php7-dev 开 ...

  5. deepin 、 windows10，双系统安装

    deepin . windows10,双系统安装: 首先,最好专门分一个盘用来存放deepin操作系统的安装位置(我这里分给它60个G). 1.在 http://rsync.deepin.com/de ...

  6. 在lldb调试中调用c++函数 - 如何使用QuartzCore里面的日志消息

    承接上一篇,上一篇讲到可以在lldb调试中调用QuartzCore.framework里的CA::Render::Object::show方法来是观察CA::Render模块内的类的信息,但是在lld ...

  7. Linux系统中文件行末尾出现^M的原因及解决办法

    不同系统,有不同的换行符号: 在windows下的文本文件的每一行结尾,都有一个回车('\n')和换行('\r') 在linux下的文本文件的每一行结尾,只有一个回车('\n'); 在Mac下的文本文 ...

  8. Redis是什么？看这一篇就够了

    本文由葡萄城技术团队编撰并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原 ...

  9. Golang 入门系列（十六）锁的使用场景主要涉及到哪些？读写锁为什么会比普通锁快

    前面已经讲过很多Golang系列知识,感兴趣的可以看看以前的文章,https://www.cnblogs.com/zhangweizhong/category/1275863.html, 接下来要说的 ...

  10. Java流程控制之（三）嵌套

    目录 嵌套循环 for循环嵌套 while循环嵌套 总结 之前谈到各种循环结构,有for循环啊,有while循环啊,可以完成不断重复的动作,相当方便.那么如果好多个循环结合再一次,又是如何实现效果的呢 ...