转自：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{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 {
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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.tb{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 {
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;
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