<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery文本超出显示省略号</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .box { width: 400px; background: #ccc; } </style> </head> <body> <div class="box">1、上码之前先三思，莫把经验当先知。 2、先弄明白业务流，创造盈利是大头。 3、再搞清楚啥需求，有了交流不会愁。 4、别想需求会稳定，莫忘初心有干劲。 5、装逼莫用新技术，完美实现一样酷。 6、编码首要是文档，记录签名和思想。 7、其次还要做注释，写清思路好搞事。 8、不要侥幸无bug，千万别等大家测。 9、写完自己测五遍，小心测试拿宝剑。 10、遇到问题试三遍，三遍不过找代练。</div> <script> function ellipsis(num) { $(".box").each(function() { var maxwidth = num; console.log($(this).text()); console.log($(this).text().length); if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).html() + '…'); } }); } ellipsis(60); //要显示的字符数 Number </script> <div class="jq" style="width: 300px;"> 测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段测试截取字段 </div> <script> $(function() { $(".jq").each(function() { var maxwidth = 200; if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).html() + '...') } }); }); </script> </body> </html>
