转自：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. java中equals方法和==的用法

    java中equals方法的用法以及==的用法(参考一)equals 方法是 java.lang.Object 类的方法.两种用法说明:(1对于字符串变量来说,使用“==”和“equals()”方法比 ...

  2. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  3. Deutsch lernen (06)

    1. das Verzeichnis,-se 表格:名单,目录 Die Daten sind in einem Verzeichnis enthalten. (包括,含有) 2. enthalten  ...

  4. C++对象的内存模型

    1. 普通对象模型 对象是如何在内存中布局的? 成员 存放位置 访问范围 非静态数据成员 每一个对象体内 为该对象专有 静态数据成员 程序的静态存储区内,只有一份实体 为该类所有对象共享 成员函数(静 ...

  5. 怎样在PDF文件中查找某个特定的词？

    不得不说中国的修饰词太多了例如:“滚”可以这样说,请你以一种圆润的方式离开:上次小编在路上听到某男子打电话,好像是给女孩子,那口才,是真的牛,夸人不带重复的.要不是我男孩子,我都想以身相许了.人们常常 ...

  6. Object.assign和序列/反序列

    Object.assign let testObj = { a:[1,2,4], b:{ name:'ls', school:['huf','yelu'], parent:{ father:'lili ...

  7. 【转】虚拟化（二）：虚拟化及vmware workstation产品使用

    vmware workstation的最新版本是10.0.2.相信大家也都使用过,其中的简单的虚拟机的创建,删除等,都很简单,这里就不再详细说明了,下面我将简单介绍下vmware workstatio ...

  8. 13、Next Item Recommendation with Self-Attention---自注意力+CML

    一.摘要: 自注意力机制------从用户历史交互中推断出项目-项目关系.学习每个项目的相对权重[用来学习用户的暂时兴趣表示] 二. 模型: 一部分是用于建模用户短期意图的自注意力机制,一部分是建模用 ...

  9. 【编程工具】Vim编辑器的使用

    1.Vim简介   Vim最初起源于古老的贝尔实验室,由"Bram Moolenaar等人"开发,是一个功能强大的文本编辑器,被推崇为类Vi编辑器中最好的一个.   Vim是一个类 ...

  10. 15.5.2 【Task实现细节】骨架方法的结构

    尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...