（转）css把超出的部分显示为省略号的方法兼容火狐

1    1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2    2. <html>
3    3. <head>
4    4. <meta http-equiv="Content-Type" c>
5    5. <title>css把超出的部分显示为省略号的方法兼容火狐</title>
6    6. <style>
7    7. * { margin: 0; padding: 0; }
8    8. a { text-decoration: none; color: #000; }
9    9. a:hover { text-decoration: none; color: #000; }
10   10. ul {
11   11. width: 300px;
12   12. margin: 40px auto;
13   13. padding: 12px 4px 12px 24px;
14   14. border: 1px solid #D4D4D4;
15   15. background: #F1F1F1;
16   16. }
17   17. li { margin: 12px 0; }
18   18. li a {
19   19. display: block;
20   20. width: 80px;
21   21. overflow: hidden;/*注意不要写在最后了*/
22   22. white-space: nowrap;
23   23. -o-text-overflow: ellipsis;
24   24. text-overflow: ellipsis;
25   25. }
26   26. /* firefox only */
27   27. li:not(p) {
28   28. clear: both;
29   29. }
30   30. li:not(p) a {
31   31. max-width: 170px;
32   32. float: left;
33   33. }
34   34. li:not(p):after {
35   35. content: "

";
36   36. float: left;
37   37. width: 25px;
38   38. padding-left: 5px;
39   39. color: #000;
40   40. }
41   41. </style>
42   42. </head>
43   43. <body>
44   44. <ul>
45   45. <li><a href="#">suntear的技术空间</a></li>
46   46. <li><a href="#">suntear的技术空间</a></li>
47   47. <li><a href="#">suntear的技术空间</a></li>
48   48. <li><a href="#">suntear的技术空间</a></li>
49   49. <li><a href="#">suntear的技术空间</a></li>
50   50. <li><a href="#">suntear的技术空间</a></li>
51   51. <li><a href="#">suntear的技术空间</a></li>
52   52. </ul>
53   53. </body>
54   54. </html>
55

posted on 2008-11-22 14:10 YarDan 阅读(627) 评论(0) 编辑收藏引用网摘

只有注册用户登录后才能发表评论。

网站导航: IT新闻博客园 BlogJava 博客生活 IT博客网 C++博客程序员招聘

yardan

（转）css把超出的部分显示为省略号的方法兼容火狐

导航

统计

公告

留言簿(1)

随笔档案

搜索

最新评论

阅读排行榜

评论排行榜