有时数据内容太长时我们并不希望其全部显示出来，因为这样可能会导致用于显示这些内容的标签被撑开影响美观。
这时就希望能够实现默认只显示部分内容，在鼠标放上去的时候再将全部的内容显示出来。
这里提供一个简单的实现方法，通过将全部内容放在单独一个标签中，通过控制这个标签的显示与隐藏实现此效果。
html页面中创建一个table，用于存放默认的数据，在需要显示更多数据的td中新建一个div用于显示所有数据（可以放在任何期望的位置）。
这里通过样式控制此div的显示与隐藏。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>过长内容隐藏</title> <style type="text/css"> td{ width:200px; border:1px solid #000; } .fullData{ display:none; } #userDesp:hover .fullData{ position:absolute; display:block; cursor:hand; word-break: break-all; width:200px; background-color: rgba(0,0,0,0.5); color:#fff } </style> </head> <body> <table> <tr> <td>用户名</td> <td>简介</td> </tr> <tr> <td>userName</td> <td id="userDesp"> 鼠标置于此查看详情 <div class="fullData"> 这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。 </div> </td> </tr> </table> </body> </html>
如果需要js控制显示与隐藏，可以使用onmouseover和onmouseout这两个事件。
给td中添加这两个事件，
<td onmouseover="showDetails(this)" onmouseout="closeDetails(this)"> 鼠标置于此查看详情 <div style="display:none"> 这时用户简介，比较长，所以把其他内容给隐藏了，鼠标放上来就能看见了哦。 </div> </td>
然后在js部分写上需要控制的div的样式。
<script type="text/javascript"> function showDetails(o){ o.getElementsByTagName("div").item(0).style.cssText = "position:absolute; display:block;cursor:hand; word-break: break-all;width:200px;background-color: rgba(0,0,0,0.5);color:#fff"; } function closeDetails(o){ o.getElementsByTagName("div").item(0).style.cssText = "display:none"; } </script>
这样就可以实现简单的隐藏与显示了。
