仿 title 属性的样式

爱车车 · 发表于 2011-7-16 10:16

最近在做网站的新闻显示时，有些新闻的长度太长，弄乱了整个页面的布局。在网上搜下了，终于搞定了。不敢私藏，整理了下，拿来跟大家一起分享下。

思路：对超过一定长度的标题进行截取，只显示规定长度的字符串。然后当鼠标经过时，显示整个标题。（类似于title属性）

样式表如下： Html代码
/*仿 title 属性的样式*/
.newsInfo:hover {
background: #eee;
color: #333;
z-index: 999;
}
.newsInfo {
color:black;
position: relative;
z-index: 0;
}
.newsInfo span {
display: none;
}
/*设置正常下的span为隐藏状态*/
.newsInfo:hover span {
display: block;
position: absolute;
min-width:400px;
top: 28px;
left:100px;
border: 1px solid #cccccc;
background: #fff;
color: #333;
padding: 5px;
text-align: left;
overflow: hidden;
}

/*截取字符串样式*/
.newInfoTruncation {
width:300px;
white-space:nowrap;
word-break:keep-all;
overflow:hidden;
text-overflow:ellipsis;
}

/*仿 title 属性的样式*/
.newsInfo:hover {
background: #eee;
color: #333;
z-index: 999;
}
.newsInfo {
color:black;
position: relative;
z-index: 0;
}
.newsInfo span {
display: none;
}
/*设置正常下的span为隐藏状态*/
.newsInfo:hover span {
display: block;
position: absolute;
min-width:400px;
top: 28px;
left:100px;
border: 1px solid #cccccc;
background: #fff;
color: #333;
padding: 5px;
text-align: left;
overflow: hidden;
}

/*截取字符串样式*/
.newInfoTruncation {
width:300px;
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">
            ２０１０年度深圳市因私出入境中介机构信息公布 28家出入境中介机构通过审核
         </div>
         <span>
            ２０１０年度深圳市因私出入境中介机构信息公布 28家出入境中介机构通过审核
         </span>
      </a>
</div>
</body>
</html>

<html>
<head>
<link href="index.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>
<a href="#"class="newsInfo">
<div class="newInfoTruncation">
２０１０年度深圳市因私出入境中介机构信息公布 28家出入境中介机构通过审核
</div>
<span>
２０１０年度深圳市因私出入境中介机构信息公布 28家出入境中介机构通过审核
</span>
</a>
</div>
</body>
</html>

test.rar (801 Bytes)
描述: 示例文件
下载次数: 485

爱车车 · 发表于 2011-7-16 10:17

样式跟布局都不是问题。你只是通过css的hover来显示一个span而已，没什么实际意义，实际项目中不可能跟你一样用。建议加上js

郁闷小男人 · 发表于 2011-7-16 10:17

直接用title属性不行么？

爱车车 · 发表于 2011-7-16 10:17

satanest
直接用title属性不行么？

之前也用title，但是客户反应有点慢。其实也不是没用，感觉还可以，现在的项目正用着（不过在截取中文，会出现截一半的情形）

fossil · 发表于 2011-7-16 10:18

消息提示效果不是更好？现在好多网站都有的

江南枫 · 发表于 2011-7-16 10:18

下载下来看了后才发现只是个简易消息提示不过还是写到TITLE里面然后移上去时在获取TITLE填充么个DIV，在浮出DIV会更好。

木已 · 发表于 2011-7-16 10:18

就是通过CSS的那个属性 overflow:hidden;隐藏的吧
但这样隐藏经常会多露出半个汉字。。。这个怎么解决？
我记得是csdn还是javaeyey的首页也经常这样。。。。。

芷馨 · 发表于 2011-9-15 10:24

经过你的指点我还是没找到在哪 ~~~

帐号		自动登录	找回密码
密码			成为会员