css特效实现html表格显示部分内容，当鼠标移上去显示全部。_html/css

css特效实现html表格显示部分内容，当鼠标移上去显示全部。_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:55:53

原创

2795人浏览过

在写网页的时候，经常需要用表格来展示数据，但是如果其中某个td中的数据太多，就会使整个页面不协调，如果固定了表格的宽度那么内容又不能全部显示出来，怎么办呢？本人今天就遇到了这样一个小问题，现将其记录下来，留作以后需要时查看。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

先上css代码:.newsInfo:hover {    background: #eee;    color: #333;    z-index: 999;}.newsInfo {    position: relative;    z-index: 0;}  .newsInfo span {	    display: none;} .newsInfo:hover span {    display: block;    position: absolute;    min-width:400px;    top: 28px;    left:100px;    border: 1px solid #cccccc;    background: #C1CDC1;    color: black;    padding: 5px;    text-align: left;    overflow: hidden;}.newInfoTruncation {    width:120px;    white-space:nowrap;     word-break:keep-all;     overflow:hidden;     text-overflow:ellipsis;}   然后html代码:<html><head>    <link href="index.css" rel="Stylesheet" type="text/css" /></head><body>    <div>        <a href="#"class="newsInfo">            <div class="newInfoTruncation">                参考消息网2月29日报道 韩媒称，中国正在迅速增强国防实力。去年年底和今年年初，中国先后采取了各种史无前例的强化军事力量的措施。有预测称，连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。            </div>            <span>                参考消息网2月29日报道 韩媒称，中国正在迅速增强国防实力。去年年底和今年年初，中国先后采取了各种史无前例的强化军事力量的措施。有预测称，连续5年实现两位数增长的中国国防预算今年的涨幅将超出以往。            </span>        </a>    </div></body></html>

登录后复制