如何计算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&nbsp;message_lines&nbsp;=&nbsp;$("#message_container")[0].getClientRects();它返回一个javascript DOM对象。通过这样做可以知道行数：var&nbsp;amount_of_lines&nbsp;=&nbsp;message_lines.length;它可以返回每行的高度等等。通过将其添加到脚本中，然后查看控制台日志，可以查看它可以执行的所有操作。console.log("");console.log("message_lines");console.log(".............................................");console.dir(message_lines);console.log("");虽然有一些注意事项是它只有在包含元素是内联的情况下才有效，但是你可以使用块元素包围包含内联元素来控制宽度，如下所示：<div&nbsp;style="width:300px;"&nbsp;id="block_message_container"><div&nbsp;style="display:inline;"&nbsp;id="message_container">..Text&nbsp;of&nbsp;the&nbsp;post..</div></div>虽然我不建议硬编码这样的风格。这只是为了举例。