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则没有。

搜索

js判断是否超过几行