Zählen von Zeilen innerhalb von DOM-Elementen

Es ist möglich, die Anzahl der Textzeilen innerhalb eines DOM-Elements zu bestimmen, dies erfordert jedoch einige Überlegungen des Stils und der Abmessungen des Elements.

Automatische Umbrüche im DOM

Automatische Zeilenumbrüche im Text werden nicht direkt im DOM selbst dargestellt. Das DOM enthält nur den Rohtextinhalt.

Zählen von Zeilen basierend auf der Elementhöhe

Wenn die Höhe des Elements jedoch von seinem Inhalt abhängt, können Sie die Anzahl schätzen von Zeilen durch Teilen der Höhe durch die Schriftzeilenhöhe.

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

Anpassungen für Abstand und Auffüllung

Beachten Sie, dass Auffüllung und Abstand zwischen Zeilen die Genauigkeit dieser Berechnung beeinträchtigen können.

Beispiel

Der folgende Code zeigt, wie Zeilen in einem div-Element mit einer festgelegten Zeilenhöhe gezählt werden:

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

Dieser Code zeigt eine Warnung mit der Anzahl der Zeilen im div-Element an.