设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 690|回复: 0

[HTML/CSS] 超出一定字数的文章用省略号代替隐藏省略文字

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-4-24 09:16:26 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
超出一定字数的文章用省略号代替隐藏省略文字,下面的案例可以实现:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Demo</title>
  6. <style type="text/css">
  7. div,ul,li{padding:0;margin:0;}
  8. ul,li{list-style: none;}
  9. a{color:#000;text-decoration:none;outline:none;}
  10. a:hover {color:#f00; text-decoration:none;}
  11. .right li{
  12. width:180px;/*不允许出现半汉字截断*/
  13. height:22px;
  14. line-height:22px;
  15. overflow:hidden;/*自动隐藏文字*/
  16. white-space:nowrap;/*强制不换行*/
  17. text-overflow:ellipsis;/*文字隐藏后添加省略号*/
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="right">
  23. <ul>
  24. <li><a href="">关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺</a></li>
  25. <li><a href="">关于邀请加入中国</a></li>
  26. <li><a href="">012-2013年中国清洁产业年度报</a></li>
  27. <li><a href="">011-2012年中国清洁产业发展</a></li>
  28. <li><a href="">我是演示文字,一切跟我没关系的~~~~我是演示文字,一切跟我没关系的~~~~我是演示文字,一切跟我没关系的~~~~</a></li>
  29. </ul>
  30. </div>
  31. </body>
  32. </html>
复制代码

演示图:
演示截图.jpg

其他扩展具体的实现请自行领悟。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:29

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表