用js控制显示的文本字数，多出的用省略号显示

前言（日常废话 ）

今天没有废话，直接上代码。

目录

• 实现效果图
• 核心方法代码
• demo(可复制运行)

正文

实现效果图

本文主要描述了如何利用js来实现下列效果图

核心方法代码

实现方法的原理主要是：先计算出限制字符个数的长度，然后生成一个span元素动态装填内容并实时计算span的长度，当span长度达到或超出限定长度时，返回此时span内的字符串。

// 返回规定汉字个数的子字符串(str为初始字符串,num为需要限制的汉字个数,body为span临时添加的父元素,fontSize为span的字体大小)
function returnTitleStringFn(str, num, body, fontSize) {
   
     // 生成一个span用于计算宽度
     var spanX = document.createElement("span");
     spanX.style.fontSize = fontSize + "px";
     spanX.style.whiteSpace = "nowrap";
     spanX.style.display = "none";
     // 判断传进来的是id还是class或者是标签名
     if (body[0] == "#") {
    //id
         body = document.getElementById(body.substring(1));
     } else if (body[0] == ".") {
    //class
         body = document.getElementsByClassName(body.substring(1))[0];
     } else {
    //标签
         body = document.getElementsByTagName(body)[0];
     }
     body.appendChild(spanX);
     // 定义一个空字符串用于存储新生成的字符串
     var newstring = "";
     // 传入汉字字数的长度（即限制的长度）
     var matchLength = "";
     // 循环填充然后计算出限定的最大长度
     for (var i = 0; i < num; i++) {
   
         newstring += "一"
     }
     spanX.innerText = newstring;
     // 存储一个限定最大宽度
     matchLength = getWidth(spanX);
     // 将新生成的字符串置空用于放置准备传出去的字符串
     newstring = "";
     // 循环往字符串中填充并计算宽度，令最终内容不超过限定最大宽度
     for (var i = 0; i < str.length; i++) {
   
         newstring += str[i];
         spanX.innerText = newstring;
         if