首页 > Web开发 > 详细

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

时间:2016-03-01 19:09:42      阅读:213      评论:0      收藏:0      [点我收藏+]

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


本文出自 “欺壹世De博客” 博客,请务必保留此出处http://qiyishi.blog.51cto.com/5731577/1746416

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

原文:http://qiyishi.blog.51cto.com/5731577/1746416

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!