Comptage des lignes dans les éléments DOM

Il est possible de déterminer le nombre de lignes de texte dans un élément DOM, mais cela nécessite une certaine réflexion du style et des dimensions de l'élément.

Les sauts de ligne automatiques dans le DOM

Les sauts de ligne automatiques dans le texte ne sont pas directement représentés dans le DOM lui-même. Le DOM ne contient que le contenu du texte brut.

Comptage des lignes en fonction de la hauteur de l'élément

Cependant, si la hauteur de l'élément dépend de son contenu, vous pouvez estimer le nombre de lignes en divisant la hauteur par la hauteur de la ligne de police.

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

Ajustements de l'espacement et du remplissage

Gardez à l'esprit que le remplissage et l'espacement inter-lignes peuvent affecter la précision de ce calcul.

Exemple

Le code suivant montre comment compter les lignes dans un élément div avec une hauteur de ligne définie :

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

Ce code affiche une alerte avec le nombre de lignes dans l'élément div.