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

Question

如何计算DOM元素内的文本行？我可以吗？我想知道是否有办法计算div中的行数。假设我们有这样的div：<div id="content">hello how are you?</div>根据许多因素，div可以有一行，两行，甚至四行文本。脚本有什么方法可以知道吗？换句话说，DOM中是否有自动中断？

Answer 1

一种解决方案是使用脚本将每个单词括在span标记中。然后，如果给定span标记的Y维度小于其前一个标记的Y维度，则会发生换行。

Answer 2

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

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

它返回一个javascript DOM对象。通过这样做可以知道行数：

var amount_of_lines = message_lines.length;

它可以返回每行的高度等等。通过将其添加到脚本中，然后查看控制台日志，可以查看它可以执行的所有操作。

console.log("");console.log("message_lines");console.log(".............................................");console.dir(message_lines);console.log("");

虽然有一些注意事项是它只有在包含元素是内联的情况下才有效，但是你可以使用块元素包围包含内联元素来控制宽度，如下所示：

<div style="width:300px;" id="block_message_container"><div style="display:inline;" id="message_container">..Text of the post..</div></div>

虽然我不建议硬编码这样的风格。这只是为了举例。