CSS截取字符串省略号效果兼容浏览器

太阳神喻

浏览: 106802 次
性别:
来自: 武汉

最近访客更多访客>>

孟雪雪

jimly8828

z1129869990

t168849550

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

浏览器 CSS Firefox XHTML HTML

<style type="text/css">
body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
div{
    width:200px;
    height:24px;
    line-height:24px;
    overflow:hidden;
    border:#ccc solid 0px;
    background-color:#F9F9F9;
    margin:5px;
}
div a{
    color:#000;
    display:block;
    padding-right:7px;
    background:url(http://www.365css.cn/example/ellipsis_365css.cn/ellipsis.gif) no-repeat right bottom;
}
</style>

<div><a href="#" title="CSS截取字符串，超出用省略号代替">CSS截取字符串，超出用省略号代替</a></div>
<div><a href="#" title="CSS截取字符串，并将超出用省略号代替">CSS截取字符串，并将超出用省略号代替</a></div>
<div><a href="#" title="365CSS">365CSS</a></div>
<div><a href="#" title="http://www.kanshula.com.cn看书啦小说网"><span>http://www.kanshula.com.cn看书啦小说网</span></a></div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS截取字符串省略号效果 兼容浏览器</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>
</head>

<body>
<ul>
<li><a href="#" title="欢迎光临#">欢迎光临#</a></li>
<li><a href="#" title="CSS截取字符串省略号效果 兼容浏览器">CSS截取字符串省略号效果 兼容浏览器</a></li>
<li><a href="#" title="CSS截取字符串省略号效果">CSS截取字符串省略号效果</a></li>
<li><a href="#" title="欢迎光临#">欢迎光临#</a></li>
</ul>
</body>
</html>

分享到：

iframe自适应高度 | css控制自动换行,防止表格或div等被撑破

2010-04-17 10:13
浏览 2466
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS截取字符串省略号效果兼容浏览器

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS截取字符串省略号效果 兼容浏览器

评论

发表评论

相关推荐

iframe自适应高度

css控制自动换行,防止表格或div等被撑破

最近访客更多访客>>

CSS截取字符串省略号效果兼容浏览器