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

javascript dom html

2022-08-30 02:44:46

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

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

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

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

答案 1

如果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>

答案 2

查看函数 getClientRects（），它可用于计算元素中的行数。以下是如何使用它的示例。

var message_lines = $("#message_container")[0].getClientRects();

它返回一个 javascript DOM 对象。通过执行以下操作可以知道行数：

var amount_of_lines = message_lines.length;

需要注意的一点是，它仅在包含元素是内联元素时才有效，但是您可以使用块元素包围包含内联元素以控制宽度，如下所示：

console.log(  message_container.getClientRects().length  )

<div style="display:inline;" id="message_container">
  ..Text of the post..<br>
  nice ha?
</div>

虽然我不建议像那样硬编码这种风格。这只是出于示例目的。