返回列表 回复 发帖

利用CSS截字的效果

  1. /* CSS DEMO */
  2. * { margin: 0; padding: 0; }
  3. a { text-decoration: none; color: #000; }
  4. a:hover { text-decoration: none; color: #000; }
  5. ul {
  6. width: 300px;
  7. margin: 40px auto;
  8. padding: 12px 4px 12px 24px;
  9. border: 1px solid #D4D4D4;
  10. background: #F1F1F1;
  11. }
  12. li { margin: 12px 0; }
  13. li a {
  14. display: block;
  15. width: 200px;
  16. overflow: hidden;
  17. white-space: nowrap;
  18. -o-text-overflow: ellipsis;
  19. text-overflow: ellipsis;
  20. }

  21. /* firefox only */
  22. li:not(p) {
  23. clear: both;
  24. }
  25. li:not(p) a {
  26. max-width: 170px;
  27. float: left;
  28. }
  29. li:not(p):after {
  30. content: "...";
  31. float: left;
  32. width: 25px;
  33. padding-left: 5px;
  34. color: #000;
  35. }

  36. /* XHTML DEMO*/
  37. <ul>
  38. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  39. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  40. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  41. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  42. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  43. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  44. <li><a href="#">设计人员必读:影响SEO的页面制作细节</a></li>
  45. </ul>
复制代码
怨去吹箫,狂来说剑,两样销魂味。
返回列表