js判斷是否超過幾行

實現超過多少行的判斷方法很多，統一寫了一個公用的通用方法。邏輯是在body中插入一個dom節點，然后把判斷行的行數，字體樣式，拿過來賦值到新增dom節點進行對比判斷。

運用場景, 例：文字超過三行出現 ... 和tooltip提示 等等。

具體實現方法：

export const isElementCollision = (ele, rowCount = 1, cssStyles, removeChild) => {
  if (!ele) {
    return false;
  }

  const clonedNode = ele.cloneNode(true);
  // 給clone的dom增加樣式
  clonedNode.style.overflow = 'visible';
  clonedNode.style.display = 'inline-block';
  clonedNode.style.width = 'auto';
  clonedNode.style.whiteSpace = 'nowrap';
  clonedNode.style.visibility = 'hidden';
  // 將傳入的css字體樣式賦值
  if (cssStyles) {
    Object.keys(cssStyles).forEach((item) => {
      clonedNode.style[item] = cssStyles[item];
    });
  }

  // 給clone的dom增加id屬性
  const containerID = 'collision_node_id';
  clonedNode.setAttribute('id', containerID);

  let tmpNode = document.getElementById(containerID);
  let newNode = clonedNode;
  if (tmpNode) {
    document.body.replaceChild(clonedNode, tmpNode);
  } else {
    newNode = document.body.appendChild(clonedNode);
  }
  // 新增的dom寬度與原dom的寬度*限制行數做對比
  const differ = newNode.offsetWidth - ele.offsetWidth * rowCount;
  if (removeChild) {
    document.body.removeChild(newNode);
  }
  return differ > 0;
};

調用方法：

**** this.rootElement // 要判斷的dom container
**** rowCount // 限制行數
**** cssStyles // 原dom 字體樣式（fontSize，fontWeight，letterSpacing）
**** 例 const cssStyles = { fontSize: '26px', fontWeight: 'bold' };
**** removeChild // 計算完成后是否刪除clone的dom -- 一般都要刪除掉
// 調用方法
isElementCollision(this.rootElement, rowCount, cssStyles, removeChild);diao yo

調用方法返回true 則是超過了您限定的行數，false則沒有。