[TimLinux] JavaScript table的td内容超过宽度缩为三个点

Posted 2021-01-01 timlinux

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[TimLinux] JavaScript table的td内容超过宽度缩为三个点相关的知识，希望对你有一定的参考价值。

1. 思路

CSS控制td内容自动缩为三个点
JS控制鼠标悬浮显示td全部内容

2. 实现

<!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内容超过宽度缩为三个点的主要内容，如果未能解决你的问题，请参考以下文章

[TimLinux] JavaScript 获取元素节点的5种方法

[TimLinux] JavaScript BOM浏览器对象模型

[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部

[TimLinux] JavaScript AJAX接收到的数据转换为JSON格式

[TimLinux] JavaScript position为fixed时支持水平滚动条