js实现文字超出规定的字数后显示查看更多

最新推荐文章于 2023-12-25 16:17:06 发布

weixin_30588729

最新推荐文章于 2023-12-25 16:17:06 发布

阅读量322

点赞数

原文链接：http://www.cnblogs.com/wh35/p/9894509.html

版权

当文字超出一定的字数后，在后面显示查看更多...

效果图：

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文字超出隐藏</title>
 6 </head>
 7 <body>
 8     <div class="box">
 9         我的超出部分会被隐藏掉！！！
10     </div>
11 </body>
12 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/wh35/jquery-3.2.1.min.js"></script>
13 <script type="text/javascript">
14     $(".box").each(function() {
15         var str = $(this).html();
16         var subStr = str.substring(0, 10);
17         $(this).html(subStr + (str.length > 10 ? '...' + "<a href='#' class='active'>查看更多</a>" : ''));
18     });
19 </script>
20 </html>