美文网首页
js控制字符串超出部分显示“更多”

js控制字符串超出部分显示“更多”

作者: cj_jax | 来源:发表于2021-01-25 18:24 被阅读0次
  • 当前设置超出10个字符显示“...” 和 “更多”(这是比较简单的方式)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>js控制显示字符</title>
  </head>
  <body>
    <div class="box">我还没超出哟</div>
    <div class="box">真的很抱歉,我超出最大长度,可能有一部分不显示了呢</div>
  </body>
  <script  type="text/javascript" src="https://blog-static.cnblogs.com/files/wh35/jquery-3.2.1.min.js" ></script>
  <script type="text/javascript">
    $(".box").each(function () {
      var str = $(this).html()
      var subStr = str.substring(0, 10)
      $(this).html(
        subStr +
          (str.length > 10
            ? "..." + "<a href='#' class='active'>查看更多</a>"
            : "")
      )
    })
  </script>
</html>
效果图.png

转载自 https://www.cnblogs.com/wh35/p/9894509.html

相关文章

网友评论

      本文标题:js控制字符串超出部分显示“更多”

      本文链接:https://www.haomeiwen.com/subject/ihyizktx.html