代码如下：
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