有時數據內容太長時我們並不希望其全部顯示出來，因為這樣可能會導致用於顯示這些內容的標簽被撐開影響美觀。
這時就希望能夠實現默認只顯示部分內容，在鼠標放上去的時候再將全部的內容顯示出來。
這里提供一個簡單的實現方法，通過將全部內容放在單獨一個標簽中，通過控制這個標簽的顯示與隱藏實現此效果。
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>
這樣就可以實現簡單的隱藏與顯示了。