代碼如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <style> 6 .newsInfo:hover { 7 background: #eee; 8 color: #333; 9 z-index: 999; 10 } 11 .newsInfo { 12 13 position: relative; 14 z-index: 0; 15 } 16 .newsInfo span { 17 18 display: none; 19 } 20 .newsInfo:hover span { 21 display: block; 22 position: absolute; 23 min-width:400px; 24 top: 28px; 25 left:100px; 26 border: 1px solid #cccccc; 27 background: #C1CDC1; 28 color: black; 29 padding: 5px; 30 text-align: left; 31 overflow: hidden; 32 } 33 .newInfoTruncation { 34 width:120px; 35 white-space:nowrap; 36 word-break:keep-all; 37 overflow:hidden; 38 text-overflow:ellipsis; 39 } 40 </style> 41 <title>純css實現鼠標置上展開顯示全部內容</title> 42 </head> 43 44 45 <body> 46 <div> 47 <table> 48 <tr> 49 <td>我是第一列</td> 50 <td> 51 <a href="#"class="newsInfo" style='text-decoration:none'> 52 <div class="newInfoTruncation"> 53 我是div里的參考消息網2月29日 54 </div> 55 <span> 56 我是span里的參考消息網2月29日報道 韓媒稱,中國正在迅速增強國防實力。去年年底和今年年初,中國先后采取了各種史無前例的強化軍事力量的措施。有預測稱,連續5年實現兩位數增長的中國國防預算今年的漲幅將超出以往。 57 </span> 58 </a> 59 </td> 60 </tr> 61 </table> 62 </div> 65 </body> 66 </html>
其中div里的是展示的,css做了處理,會自動給你加上。。。結尾的。span里的才是展示的全部內容。
轉載自:https://blog.csdn.net/weixin_33890526/article/details/92992232