Иногда нам нужно подсчитать количество строк текста внутри элемента DOM с помощью JavaScript.

В этой статье мы рассмотрим, как подсчитать количество строк текста внутри элемента DOM с помощью JavaScript.

Разделите высоту элемента на высоту строки

Чтобы получить количество строк в элементе, мы можем разделить высоту элемента на его высоту строки.

Например, если у нас есть следующий HTML:

<div style="line-height: 20px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique nec magna non faucibus. Cras ut mi dignissim, tristique elit at, porta lorem. Pellentesque et odio sed enim commodo commodo in sit amet nunc. Phasellus eu tempus felis, id aliquet leo. Curabitur mollis mauris non dui ornare,
</div>

Затем мы можем выполнить вычисление, написав:

const el = document.querySelector('div');
const divHeight = +el.offsetHeight
const lineHeight = +el.style.lineHeight.replace('px', '');
const lines = divHeight / lineHeight;
console.log(lines);

Мы должны установить высоту строки явно с помощью свойства CSS line-height, как мы это сделали в HTML.

Затем мы выбираем div с помощью document.querySelector .

Затем мы получаем высоту div, используя свойство offsetHeight.

Затем мы получаем lineHeight со свойством el.style.lineHeight, мы удаляем 'px', чтобы мы могли преобразовать строку в число с +.

Затем мы делим divHeight на lineHeight, чтобы получить количество строк в div.

Заключение

Чтобы получить количество строк в элементе, мы можем разделить высоту элемента на его высоту строки.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube,и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.