转自：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. css中background-origin属性的使用

    background-origin用来规定元素背景图像的相对定位位置,它有三个属性值: 1.border-box border-box表示元素背景图像相对于border区域开始定位. 代码如下: &l ...

  2. React+Dva

    Reducer reducer 是一个函数,接受 state 和 action,返回老的或新的 state .即:(state, action) => state Effect app.mode ...

  3. java基础学习四

    一.java中的基本数据类型 二.double和float精度不准的问题 double和float本身确实存在某种缺陷,不能用于精确计算. 解决办法: 用java.math.BigDecimal,通过 ...

  4. Android中Button四种点击事件实现方式

    1.Xml添加监听属性,这里添加的doClick. <Button android:id="@+id/bt1" android:layout_width="wrap ...

  5. react基础篇四

    列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li& ...

  6. linux环境jdk安装及配置

    linux环境jdk安装及配置 linux环境jdk安装及配置 1.下载jkd( http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  7. python中*的用法

    在python中,很多情况下会用到*,下面举一些例子来说明*的用法 1.数字计算中,*代表乘法,**代表求幂 print('2乘以3值为:%s'%(2*3)) print('2的3次方值为:%s'%( ...

  8. POJ 1979 Red and Black (BFS)

    链接 : Here! 思路 : 简单的搜索, 直接广搜就ok了. /****************************************************************** ...

  9. codeforces 244B-Undoubtedly Lucky Numbers 搜索

    题意:给你一个n,求不大于n的并且仅由两种或者一种数字组成的数的个数.(有点绕,,简单点就是,看看小于等于n点数中,,有多少数字只有一种数字,或者有两种数字组成) “哎,自己还是太菜了,训练的时候只做 ...

  10. 利用pandas库中的read_html方法快速抓取网页中常见的表格型数据

    本文转载自:https://www.makcyun.top/web_scraping_withpython2.html 需要学习的地方: (1)read_html的用法 作用:快速获取在html中页面 ...