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. nginx recv() failed (104: Connection reset by peer) while reading response header from upstream解决方法

    首先说下 先看 按照ab 每秒请求的结果 看看 都有每秒能请求几个 如果并发量超出你请求的个数 会这样 所以一般图片和代码服务器最好分开 还有看看io瓶ding 和有没有延迟的PHP代码执行 0 先修 ...

  2. iOS--通过runtime完成归档，反归档

    通过runtime,不管模型有多少属性,通过几句代码就能完成. 假设person类有N多个属性而是(这里随便写3个) .h #import <Foundation/Foundation.h> ...

  3. [LC]234题 Linked List Cycle （回文链表）（链表）

    ①中文题目 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2输出: false示例 2: 输入: 1->2->2->1输出: true进阶:你能否用 O(n) 时间 ...

  4. Kafka needs no Keeper（关于KIP-500的讨论）

    写在前面的 最近看了Kafka Summit上的这个分享,觉得名字很霸气,标题直接沿用了.这个分享源于社区的KIP-500,大体的意思今后Apache Kafka不再需要ZooKeeper.整个分享大 ...

  5. C语言程序设计100例之（14）：丑数

    例14   丑数 问题描述 丑数是其质因子只可能是2,3或5的数.前10个丑数分别为1, 2, 3, 4, 5, 6, 8, 9, 10, 12.输入一个正整数n,求第n个丑数. 输入格式 每行为一个 ...

  6. HTML中的表格标签

      表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据.但是在实际制作过程中,表格更多用在网页布局的定位上.很多网页都是以表格布局的.这是因为表格在文本和图像的位置控制方面 ...

  7. 领扣（LeetCode）交替位二进制数 个人题解

    给定一个正整数,检查他是否为交替位二进制数:换句话说,就是他的二进制数相邻的两个位数永不相等. 示例 1: 输入: 5 输出: True 解释: 5的二进制数是: 101 示例 2: 输入: 7 输出 ...

  8. 18063-圈中的游戏-(第九章第4题)-"数组指针的使用"-数学分析

    代码借鉴CSDN大佬https://blog.csdn.net/weixin_41409140/article/details/88071047(对大佬的大佬代码进行分析) 18063 圈中的游戏 时 ...

  9. 【Linux系列】Centos 7安装 Nginx（三）

    目的 为了下面的Laravel部署,本篇开始安装Nignx服务器. 防火墙设置 在物理主机上查看nginx是否安装成功,需要开放虚拟机的80端口. 用cmder登录到虚拟机 firewall-cmd ...

  10. Spring Boot整合Mybatis报错InstantiationException: tk.mybatis.mapper.provider.base.BaseSelectProvider

    Spring Boot整合Mybatis时一直报错 后来发现原来主配置类上的MapperScan导错了包 由于我使用了通用Mapper,所以应该导入通用mapper这个包