js判斷當前文本為幾行


 
         
// 參數1:判斷的dom元素
// 參數2:判斷的當前幾行
// 參數3:當前dom元素的css
// 參數4:是否移除復制的dom元素
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.$nextTick(() => {
   var dom = document.getElementById("remarks");
   let cssStyles = {
      fontSize: "14px",
      letterSpacing: 0,
      fontWeight: 400,
   };
var fiveFlag = isElementCollision(dom, 2, cssStyles, true);
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM