如何计算 DOM 元素内的文本行数？我可以吗？

例如，我想知道是否有一种方法可以计算 div 内的行数。假设我们有一个这样的 div：

 <div id="content">hello how are you?</div>

根据许多因素，div 可以有一行、两行甚至四行文本。脚本有什么办法知道吗？

换句话说，自动中断是否在 DOM 中表示？

原文由 buti-oxa 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1k

var rects = elementList[i].getClientRects(); var p = document.createElement('p'); p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));

如果 div 的大小取决于内容（根据您的描述我假设是这种情况），那么您可以使用以下方法检索 div 的高度：

 var divHeight = document.getElementById('content').offsetHeight;

并除以字体行高：

 document.getElementById('content').style.lineHeight;

或者在未明确设置的情况下获取行高：

 var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");

您还需要考虑填充和行间距。

编辑

完全独立的测试，明确设置行高：

 function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}

 <body onload="countLines();">
  <div id="content" style="width: 80px; line-height: 20px">
    hello how are you? hello how are you? hello how are you? hello how are you?
  </div>
</body>

原文由 Pool 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何计算 DOM 元素内的文本行数？我可以吗？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何自定义设置虚线边框的样式？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

Stack Overflow 翻译