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代码。

现在，如果这是实际html页面中的ap元素，那么行数将取决于多种因素，例如字体大小，字体系列，字母间距，字体粗细，字符数，视口宽度，浏览器等。

是否存在任何JavaScript方法或CSS规则来针对特定屏幕尺寸返回特定浏览器中特定p元素的行数？

我的意思是，如果我们想用该数字执行某些操作，例如将其存储在变量中或在if语句中使用它，我们如何检查加载p元素时的行数？

有什么办法可以做到吗？

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

如何返回p元素的行数？

2 个答案: