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

WBOY
发布: 2016-06-21 08:55:53
原创
2532 人浏览过

在写网页的时候,经常需要用表格来展示数据,但是如果其中某个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>
登录后复制


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板