Подсчет строк в элементах DOM

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

Автоматические разрывы в DOM

Автоматические разрывы строк в тексте не представлены напрямую в самом DOM. DOM содержит только необработанный текстовый контент.

Подсчет строк на основе высоты элемента

Однако, если высота элемента зависит от его содержимого, вы можете оценить количество строк путем деления высоты на высоту строки шрифта.

var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;

Корректировки интервалов и отступов

Имейте в виду, что отступы и межстрочные интервалы могут повлиять на точность этого расчета.

Пример

Следующий код демонстрирует, как подсчитывать строки в элементе div с заданной высотой строки:

  hello how are you? hello how are you? hello how are you? hello how are you?

function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight;
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: "   lines);
}

Этот код отображает предупреждение с указанием количества строк в элементе div.