转自：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. P3709 大爷的字符串题（50分）

    题目背景 在那遥远的西南有一所学校 /*被和谐部分*/ 然后去参加该省省选虐场 然后某蒟蒻不会做,所以也出了一个字符串题: 题目描述 给你一个字符串a,每次询问一段区间的贡献 贡献定义: 每次从这个区 ...

  2. POJ_2115_扩展欧几里德

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23673   Accepted: 6540 Descr ...

  3. 去掉二级页面 tabs 菜单, 修改返回按钮

    imports: [ /*引入的模块 依赖的模块*/ BrowserModule, ComponentsModule, IonicModule.forRoot(MyApp,{ tabsHideOnSu ...

  4. 为什么多 TCP 连接比单 TCP 连接传输快

    转自: 我观察到,客户端机器从单一服务器使用 HTTP 下载一个文件:1. 单连接下载,速度没有达到客户端网络的最大带宽:2. 多连接同时下载,传输速度有极大的提高,带宽被占满. 假设如下前提:1. ...

  5. [置顶] 我的 Java 后端书架 (2016 年暖冬版)

    转自:  http://calvin1978.blogcn.com/articles/bookshelf16.html 我的 Java 后端书架 (2016 年暖冬版) 本书架主要针对 Java 后端 ...

  6. SQL第三节课

    常用函数 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x ...

  7. NOIP2016 DAY2 T2蚯蚓

    传送门 Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神 ...

  8. 16._source元数据

  9. 通过请求接口的办法获得本设备IP以及IP地址

    获取本设备IP接口(搜狐) http://pv.sohu.com/cityjson?ie=utf-8 result Content: {    "cip": "58.21 ...

  10. 【Codeforces Round #519 by Botan Investments E】Train Hard, Win Easy

    [链接] 我是链接,点我呀:) [题意] [题解] 设每个人做第一题.第二题的分数分别为x,y 我们先假设没有仇视关系. 即每两个人都能进行一次训练. 那么 对于第i个人. 考虑第j个人对它的贡献 如 ...