Comment puis-je compter le nombre de lignes dans un élément DOM ?

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.

Rentres automatiques 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.

<code class="js">var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;</code>

Ajustements pour l'espacement et 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 :

<code class="html"><div id="content" style="width: 80px; line-height: 20px">
  hello how are you? hello how are you? hello how are you? hello how are you?
</div></code>

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!