用CSS实现标题后面加省略号 - IDC资讯网_站长学院 - Java PHP Flex Python Ajax CSS 编程 开源 学习 总结 分享
在网页中,对于标题字数太多时,页面布局会很难看。下面是用CSS来实现带省略号的效果。

<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>
 


预览效果,请点这里:attachment.php?fid=417

编程语言 | 评论(0) | 引用(0) | 阅读(4445)