Как вернуть количество строк для элемента ap?

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>

В моем текущем размере экрана, в моем конкретном браузере, потребовалось 3 целых строки, чтобы набрать этот кусок HTML-кода внутри элемента флажка, в котором я нахожусьвведите этот вопрос.

Теперь, если бы это был элемент ap на реальной HTML-странице, число строк зависело бы от множества факторов, таких как font-size, font-family, letter-spacing, font-weight,количество символов, ширина области просмотра, браузер и т. д.

Существует ли какой-либо метод 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;
}

Answer 2

Подсчитывая разрывы строк можно с помощью JavaScript, проверьте мой код ниже

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