javascript - 如何返回 p 元素的行数？

Question

考虑下面的 p 元素。

<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z qwertyuiopasdfghjklzxcvbnm 122333444455555666666777777788888888999999999</p>

在我当前的屏幕尺寸下，在我的特定浏览器中，在我输入这个问题的复选框元素中输入这段 html 代码需要整整 3 行。

现在，如果这是一个真正的 html 页面中的 p 元素，行数将取决于多种因素，例如字体大小、字体系列、字母间距、字体粗细、字符数、视口(viewport)宽度、浏览器等

是否有任何 javascript 方法或 css 规则来返回特定浏览器中特定屏幕尺寸的特定 p 元素的行数？

我的意思是，如果我们想用那个数字做一些事情，比如将它存储在一个变量中或在 if 语句中使用它，我们如何在加载元素时检查行数？

有什么办法可以做到这一点吗？

Answer 1

元素高度除以行高的简单计算可以得出实际显示上呈现的行数。

// 1. get height of element.
// 2. get line height.
// 3. divide 1 by 2 to figure out computed lines.

function countLines(element) {

    let x = $(element).prop('scrollHeight');
    let y = $(element).css('lineHeight');
    y = parseInt(y);

    return x/y;
}