• 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方法,实现这个功能还是很简单的,但是很实用,以上就是这篇文章的全部内容了,希望这篇文章对大家能有一定的帮助。

  • 相关阅读:
    [国嵌攻略][097][U-Boot新手入门]
    [国嵌攻略][070-095][Linux编程函数手册]
    自己写的切图工具(转)
    【总结整理】关于切图
    【总结整理】冯诺依曼体系结构
    【总结整理】面试需了解
    【总结整理】如何解决跨域问题
    【总结整理】WebGIS基础
    【总结整理】空间数据库基础
    【总结整理】WMS、WMTS、WFS
  • 原文地址:https://www.cnblogs.com/heroine/p/6702818.html
Copyright © 2020-2023  润新知