zoukankan      html  css  js  c++  java
  • js实现文字超出部分用省略号代替实例代码

    关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴。

    话不多说,我们直接看代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>超过的文字用省略号代替的js写法</title>
    </head>
     
    <body>
    <script>
     function cutString(str, len) {
     //length属性读出来的汉字长度为1
     if(str.length*2 <= len) {
      return str;
     }
     var strlen = 0;
     var s = "";
     for(var i = 0;i < str.length; i++) {
      s = s + str.charAt(i);
      if (str.charCodeAt(i) > 128) {
       strlen = strlen + 2;
       if(strlen >= len){
        return s.substring(0,s.length-1) + "...";
       }
      } else {
       strlen = strlen + 1;
       if(strlen >= len){
        return s.substring(0,s.length-2) + "...";
       }
      }
     }
     return s;
    }
     
    window.onload=function(){
      var str = document.getElementById('cut_str').innerHTML;
      var s=cutString(str,15);
      document.getElementById('cut_str').innerHTML=s;
    }
    </script>
     
    <div class="js_cut_str"><p id="cut_str">超过的文字用省略号代替的js写法。</p></div>
    </body>
    </html>

    实现效果图

    总结

    其实主要还是用到了js的substring方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。

  • 相关阅读:
    请实现一个js脚本,要求做到将数字转化为千分位表示如:1234567转化为1,234,567
    Linux mlocate安装
    Linux CentOS7网络简单配置
    Linux 常见命令 文件搜索命令
    Linux 常见命令 权限管理命令
    Linux 常见命令 链接命令
    Linux 常见命令 文件处理指令
    List与Set的contains方法效率问题
    集合介绍
    Arrays.asList()
  • 原文地址:https://www.cnblogs.com/heroine/p/6702818.html
Copyright © 2011-2022 走看看