Contando linhas dentro de elementos DOM

É possível determinar o número de linhas de texto dentro de um elemento DOM, mas isso requer alguma consideração do estilo e das dimensões do elemento.

Quebras automáticas no DOM

Quebras automáticas de linha no texto não são diretamente representado no próprio DOM. O DOM contém apenas o conteúdo de texto bruto.

Contando linhas com base na altura do elemento

No entanto, se a altura do elemento depender de seu conteúdo, você pode estimar o número de linhas dividindo a altura pela altura da linha da fonte.

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

Ajustes para espaçamento e preenchimento

Lembre-se de que o preenchimento e o espaçamento entre linhas podem afetar a precisão deste cálculo.

Exemplo

O código a seguir demonstra como contar linhas em um elemento div com uma linha definida altura:

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

Este código exibe um alerta com o número de linhas no elemento div.