js计算字符串在动态宽度容器中的行数

  isTextOverflow(val: string) {

     // val：字符串 this.fixedWidth：容器宽度

    let fixedWidth = this.fixedWidth

    const textElement = document.createElement('div');

    textElement.style.width = `${fixedWidth}px`; // 设置固定宽度  

    textElement.style.whiteSpace = 'spanWidth'; // 使用normal确保文字在需要时自动换行  

    textElement.style.overflowWrap = 'break-word'; // 确保长单词也会在必要时换行  

    textElement.style.position = 'absolute';  

    textElement.style.left = '-9999px';  

    textElement.style.top = '-9999px';  

    textElement.style.visibility = 'hidden';

   // 设置div的内容为传入的字符串，确保换行符被正确处理  

    textElement.innerHTML =val ? val.replace(/\r?\n/g, '<br>') : '' // 将换行符替换为<br>标签

    document.body.appendChild(textElement);

    const lineHeight = parseInt(

      window.getComputedStyle(textElement).lineHeight,

      10

    );

    const actualLines = Math.ceil(textElement.offsetHeight / lineHeight);

    document.body.removeChild(textElement);

    return actualLines > this.maxLines;

  }

获取this.fixedWidth：

给需要获取的元素添加ref，需要在DOM渲染完成后执行

    getSpanWidth(){

       const spanElement = this.$refs.myspan as HTMLElement;

      if (spanElement) {  

        // 获取span的实际宽度  

        this.fixedWidth = spanElement.offsetWidth - 130;

      }

    }