转自：https://blog.csdn.net/weixin_42193908/article/details/80405014

两种方式显示：

1.title方式显示：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>  
<style type="text/css">  
.tb{width:800px;font-size:12px;background:#6887D9}  
.tb thead th{height:25px;background:#217AC4;color:white}  
.tb tbody td{height:22px;background:white;padding-left:3px;}  
.autocut {  
    width:200px;  
    overflow:hidden;  
    white-space:nowrap;  
    text-overflow:ellipsis;  
    -o-text-overflow:ellipsis;  
    -icab-text-overflow: ellipsis;  
    -khtml-text-overflow: ellipsis;  
    -moz-text-overflow: ellipsis;  
    -webkit-text-overflow: ellipsis;  
}  
  
</style>  
</head>  
<body>  
 <table class="tb" border="0" cellpadding="1" cellspacing="1">  
    <thead>  
        <tr>  
            <th>Column1</th>  
            <th>Column2</th>  
            <th>Column3</th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
        <tr>  
            <td>Column1</td>  
            <td width="200px;"><div class="autocut" title="放松的方式方法对所发生的放松的方式的方式">放松的方式方法对所发生的放松的方式的方式</div></td>  
            <td>Column3</td>  
        </tr>  
    </tbody>  
  </table>  
</body>  
</html>  
 
 
 
 

2.切换class属性方式：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
.li1 {
list-style:none;
width:100px;
white-space:nowrap;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden;
margin-top:5px; 
}
 
.li2{
list-style:none;
margin-top:5px;
}
</style>
<script type="text/javascript"  src="jquery-1.11.3.js"></script> 
</head>  
<body> 
<ul>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">尽快了解了解可怜快捷链接里看见快乐建立</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">和国际环境来看看窘境看见了开发机构了解了空间</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">发电股份的合格两款发动机和旅客看了解了空间</a></li>
<li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">发电股份的高科技了发动机来看发给大家了发动机来看</a></li>
</ul>
</body>
</html>

 
 
转自：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhangyan8120399100/article/details/51659130

表格td内容过多时，td显示省略号，鼠标移入显示全部内容。的更多相关文章

  1. td文字过长部分显示，鼠标移动显示全部内容

    只要在该td中加上title属性,鼠标移到这里就会看到全部内容, 在td中加上div,属性设置如下,就能显示宽度为200px的内容,大于则隐藏.代码如下: <td title="我是代 ...

  2. Div内部的内容超出部分显示省略号（仅仅只有一行内容）

    效果如下:

  3. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  4. IE7 -- 鼠标移入显示下拉框 不显示的问题 / 以及宽度问题

    这个问题,真的是打击到我了,我一度不相信自己无法解决这个问题.但是我就是真的没有解决. 那么问题解决方案是: 第一 祖先级别有一个相对定位,父级再有一个定位,那么绝对定位显示出来的元素就会不显示. 第 ...

  5. angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框

    首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...

  6. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  7. JS文本中间显示省略号

    众所周知,文本溢出显示省略号用CSS就可以: 单行文本: white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display ...

  8. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  9. css强制换行显示省略号之显示两行后显示省略号

    1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...

随机推荐

  1. 安卓通过UDP协议传输数据，中文乱码的问题

    公司最近需要往智能家居方面发展,需要用到UDP协议传输数据,在网上找到了一些资料,但是发现传输中文的时候有乱码的现象,经过我多番捣鼓,终于解决了这个问题,下面贴上关键代码 客户端: public cl ...

  2. 【Linux】tmpfs简介及增加方式

    一. 什么是tmpfs? tmpfs是一种基于内存的文件系统,它和虚拟磁盘ramdisk比较类似,但不完全相同,和ramdisk一样,tmpfs可以使用RAM,但它也可以使用swap分区来存储.而且传 ...

  3. QS之force(1)

    force This command allows you to apply stimulus interactively to VHDL signals(not variables), Verilo ...

  4. 转：Python结合P有winauto进行windows UI自动化

    https://blog.csdn.net/z_johnny/article/details/52778064

  5. 三种“BIOS设置光驱第一启动的图解”

    除特殊机器类型一般都是“开机按DEL进入BIOS界面,当然还有AMD主板有按F2的进入” 第一种.AWARD BIOS设置光驱启动方法: 进入Bios界面,选第二项——>回车 选中此项,按PAG ...

  6. javaee 用Buffered进行对象的写入和读取

    package Zjshuchu; import java.io.Serializable; public class Dog implements Serializable{    private ...

  7. 【剑指Offer】 24、二叉树中和为某一值的路径

      题目描述:   输入一颗二叉树的根结点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中, ...

  8. call，apply，bind

    1.IE5之前不支持call和apply,bind是ES5出来的;2.call和apply可以调用函数,改变this,实现继承和借用别的对象的方法; 1 call和apply定义 调用方法,用一个对象 ...

  9. Python 3下使用Matplotlib工具画图，中文显示乱码的问题解决

    import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams['font.sans-serif']=['SimHei'] ...

  10. 解决HTML select控件 设置属性 disabled 后无法向后台传值的方法

    大家都知道有时候修改数据的时候我们希望有一些数据是不可以修改的,通常情况下我们会将input框设置为 readonly , 但是 select 控件没有这个属性,需要使用另一个属性 disabled ...