js非递归文字换行

 由于数字、中文、符号所占像素长度不一致，所以这里不能用求平均值的方式去计算每行的文字个数，于是我写了一个方法来计算每行的真实数字个数。

  /**
   * 计算每行显示文字
   * @param rows 指定需要换几行
   * @param text 需要进行换行的文本
   * @param max_width 最大长度
   */
  function calcRTNLabel(rows, text, max_width) {
    let labelArr = [];
    let index = 0;
    let labelInterval = Math.ceil(text.length / (rows + 1));
    while (index < rows && text) {
      let lastIndex = index + 1;
      let chart = text.slice(0, labelInterval);
      let { labelWidth } = getTextWidth(chart);
      // 文字长度大于最长
      if (labelWidth > max_width) {
        let nextChart = text.slice(0, labelInterval - 1);
        let { labelWidth } = getTextWidth(nextChart);
        index--;
        labelInterval--;
      }
      // 文字长度小于最长
      else if (labelWidth <= max_width) {
        let nextChart = text.slice(0, labelInterval + 1);
        let { labelWidth } = getTextWidth(nextChart);
        if (labelWidth < max_width) {
          if (
            !text.slice(labelInterval + 1, labelInterval + labelInterval + 1)
          ) {
            // 剩余文字长度不够换行，结束遍历
            break;
          }
          index--;
          labelInterval++;
        } else {
          text = text.slice(labelInterval, text.length);
          labelArr.push(chart + "\n");
        }
      }
      index++;
    }

    if (text) labelArr.push(text);
    return labelArr.join("");
  }

   /**
   * 计算文字在图上的长度
   * @param text 文字
   * @param fontSize 用户输入文字大小
   */
   function getTextWidth(text, fontSize) {
    // 创建临时元素
    const _span = document.createElement("span");
    // 放入文本
    _span.innerText = text;
    // 设置文字大小
    _span.style.fontSize = fontSize + "px";
    // span元素转块级
    _span.style.position = "absolute";
    // span放入body中
    document.body.appendChild(_span);
    // 获取span的宽度
    let width = _span.offsetWidth;
    let height = _span.offsetHeight;
    // 从body中删除该span
    document.body.removeChild(_span);
    // 返回span宽度
    return { labelWidth: width, labelHeight: height };
  }