Contando líneas dentro de elementos DOM

Es posible determinar el número de líneas de texto dentro de un elemento DOM, pero requiere cierta consideración del estilo y las dimensiones del elemento.

Saltos automáticos en DOM

Los saltos de línea automáticos en el texto no se representado en el propio DOM. El DOM solo contiene el contenido de texto sin formato.

Contando líneas según la altura del elemento

Sin embargo, si la altura del elemento depende de su contenido, puede estimar el número de líneas dividiendo la altura por la altura de la línea de fuente.

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

Ajustes de espaciado y relleno

Tenga en cuenta que el relleno y el espaciado entre líneas pueden afectar la precisión de este cálculo.

Ejemplo

El siguiente código demuestra cómo contar líneas en un elemento div con una línea establecida 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 muestra una alerta con el número de líneas en el elemento div.