如何 return 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 元素，行数将取决于多种因素，例如字体大小、字体系列、字母间距、字体粗细、数字字符数、视口宽度、浏览器等

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

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

有什么办法可以做到吗？

Answer 1

通过计算换行符可以使用 javascript，检查下面的代码

function lineBreakCount(str){
/* counts \n */
try {
    return((str.match(/[^\n]*\n[^\n]*/gi).length));
} catch(e) {
    return 0;
}
}

Answer 2

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

// 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;
}

如何 return p 元素的行数？

How to return number of lines for a p element?

html

javascript

css

paragraph