Wie kann ich Textzeilen innerhalb eines DOM-Elements zählen? Kann ich?

127

Ich frage mich, ob es zum Beispiel eine Möglichkeit gibt, Zeilen innerhalb eines Div zu zählen. Sagen wir, wir haben so einen Div:

<div id="content">hello how are you?</div>

Abhängig von vielen Faktoren kann das div eine, zwei oder sogar vier Textzeilen haben. Gibt es eine Möglichkeit für das Skript zu wissen?

Mit anderen Worten, sind automatische Pausen überhaupt in DOM dargestellt?

javascript html dom Buti-Oxa
quelle

88

Wenn die Größe des Divs vom Inhalt abhängt (was meiner Beschreibung nach der Fall ist), können Sie die Höhe des Divs abrufen, indem Sie:

var divHeight = document.getElementById('content').offsetHeight;

Und dividieren Sie durch die Höhe der Schriftzeile:

document.getElementById('content').style.lineHeight;

Oder um die Zeilenhöhe zu erhalten, wenn sie nicht explizit festgelegt wurde:

var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");

Sie müssen auch die Polsterung und den Abstand zwischen den Zeilen berücksichtigen.

BEARBEITEN

Vollständig in sich geschlossener Test, bei dem die Zeilenhöhe explizit festgelegt wird:

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

<body onload="countLines();">
  <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>
</body>

Erweitern Sie das Snippet

Schwimmbad
quelle

7

Es ist ein guter Anfang, außer dass die Zeilenhöhe möglicherweise nicht immer eingestellt wurde. Sie sollten dies aus dem berechneten Stil des Elements erhalten.

Chetan S

Bei zweiten Überlegungen muss die Zeilenhöhe nicht immer numerisch (oder in Pixel) sein. Wenn Ihr Code darauf angewiesen ist und Ihre CSS-Konvention dies zulässt, sollten Sie wahrscheinlich eine Zeilenhöhe in Pixel festlegen.

Chetan S

6

@Chetan - Das Festlegen von Textabmessungen in Pixel wird im Allgemeinen als schlecht angesehen. astahost.com/Sizes-Webdesign-Em-Vs-Px-t8926.html

annakata

6

Dies funktioniert möglicherweise nur im einfachsten Fall (wie in meinem Beispiel). Wenn sich darin Bereiche, Inline-Block-Elemente usw. befinden, ist eine einfache Division durch die (übergeordnete) Schriftgröße wertlos. Trotzdem ist es besser als nichts, danke.

Buti-Oxa

2

Ich denke, eine bessere Methode, um eine Berechnung zu erhalten line-height(die nicht explizit festgelegt ist), wäre die Verwendung vonwindow.getComputedStyle(element, null).getPropertyValue('line-height')

Rnevius

20

Eine Lösung besteht darin, jedes Wort mithilfe eines Skripts in ein span-Tag einzuschließen. Wenn dann die Y-Dimension eines bestimmten Span-Tags kleiner als die des unmittelbaren Vorgängers ist, ist ein Zeilenumbruch aufgetreten.

Bob Brunius
quelle

Klug! Wie machst du das? Ich nehme an, Sie nehmen nur einen Textabsatz an (wie ich es im Beispiel getan habe). Ich hatte diese Einschränkung nicht im Auge, aber es kann in Ordnung sein, vorausgesetzt, das Skript stürzt nicht ab, wenn sich etwas anderes im Absatz befindet.

Buti-Oxa

1

Beim zweiten Gedanken schlägt diese Methode fehl, wenn die Linie vertikal ausgerichtete Bereiche enthält. Daher kann auch nur ein Absatz mit Text falsch gezählt werden.

Buti-Oxa

Mein Div hat Text und Bilder ... zum Glück sind die Bilder absolut positioniert, so dass ich denke, dass sie ausgeschlossen wären. : D Wie auch immer, ich habe den gleichen Code verwendet, den Sie vorgeschlagen haben, aber mit einem Div ohne Spanne, danke aber +1!

Albert Renshaw

20

Schauen Sie sich die Funktion getClientRects () an, mit der die Anzahl der Zeilen in einem Element gezählt werden kann. Hier ist ein Beispiel für die Verwendung.

var message_lines = $("#message_container")[0].getClientRects();

Es gibt ein Javascript-DOM-Objekt zurück. Die Anzahl der Zeilen kann folgendermaßen ermittelt werden:

var amount_of_lines = message_lines.length;

Es kann die Höhe jeder Zeile und mehr zurückgeben. Sehen Sie sich das gesamte Spektrum der möglichen Funktionen an, indem Sie dies Ihrem Skript hinzufügen und dann in Ihrem Konsolenprotokoll nachsehen.

console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");

Obwohl einige Dinge zu beachten sind, funktioniert es nur, wenn das enthaltende Element inline ist. Sie können das enthaltende inline-Element jedoch mit einem Blockelement umgeben, um die Breite wie folgt zu steuern:

<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>

Obwohl ich nicht empfehle, den Stil so hart zu codieren. Es ist nur zum Beispiel Zwecke.

Digital-Christie
quelle

3

Diese und die andere getClientRects-basierte Antwort sind weitaus besser als die akzeptierte

matteo

2

Dies sollte die akzeptierte Antwort sein. Vielen Dank @ Digital-Christie

Antuan

12

Ich war mit den Antworten hier und auf anderen Fragen nicht zufrieden. Die am höchsten bewertete Antwort berücksichtigt paddingoder borderberücksichtigt sie nicht und wird daher offensichtlich auch ignoriert box-sizing. Meine Antwort kombiniert einige Techniken hier und in anderen Threads, um eine Lösung zu erhalten, die zu meiner Zufriedenheit funktioniert.

Es ist nicht perfekt: Wenn kein numerischer Wert für das line-height(z. B. normaloder inherit) abgerufen werden konnte , wird nur das font-sizemultiplizierte mit verwendet 1.2. Vielleicht kann jemand anderes in diesen Fällen einen zuverlässigen Weg vorschlagen, um den Pixelwert zu erkennen.

Davon abgesehen war es in der Lage, die meisten Stile und Fälle, die ich darauf geworfen habe, korrekt zu handhaben.

jsFiddle zum Herumspielen und Testen. Auch unten inline.

function countLines(target) {
  var style = window.getComputedStyle(target, null);
  var height = parseInt(style.getPropertyValue("height"));
  var font_size = parseInt(style.getPropertyValue("font-size"));
  var line_height = parseInt(style.getPropertyValue("line-height"));
  var box_sizing = style.getPropertyValue("box-sizing");
  
  if(isNaN(line_height)) line_height = font_size * 1.2;
 
  if(box_sizing=='border-box')
  {
    var padding_top = parseInt(style.getPropertyValue("padding-top"));
    var padding_bottom = parseInt(style.getPropertyValue("padding-bottom"));
    var border_top = parseInt(style.getPropertyValue("border-top-width"));
    var border_bottom = parseInt(style.getPropertyValue("border-bottom-width"));
    height = height - padding_top - padding_bottom - border_top - border_bottom
  }
  var lines = Math.ceil(height / line_height);
  alert("Lines: " + lines);
  return lines;
}
countLines(document.getElementById("foo"));

div
{
  padding:100px 0 10% 0;
  background: pink;
  box-sizing: border-box;
  border:30px solid red;
}

<div id="foo">
x<br>
x<br>
x<br>
x<br>
</div>

Erweitern Sie das Snippet

Jeff
quelle

hilfreicher Beitrag ... Danke

Sinto

Gute Überlegung, aber in meinem Fall ist die Höhe einer Zeile div um 1 Pixel größer als die Zeilenhöhe, ohne Polsterung und Rand. Daher ist es möglicherweise besser, die Zeilenhöhe durch Kämmen Ihrer Antwort und der Antwort von @ e-info128 (cloneNode-Methode) zu ermitteln

Eric

8

Klonen Sie das Containerobjekt und schreiben Sie 2 Buchstaben und berechnen Sie die Höhe. Dies gibt die tatsächliche Höhe mit allen angewendeten Stilen, Linienhöhen usw. zurück. Berechnen Sie nun das Höhenobjekt / die Größe eines Buchstabens. In Jquery übertrifft die Höhe die Polsterung, den Rand und den Rand. Es ist großartig, die tatsächliche Höhe jeder Linie zu berechnen:

other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() /  size;

Wenn Sie eine seltene Schriftart mit unterschiedlicher Höhe für jeden Buchstaben verwenden, funktioniert dies nicht. Funktioniert aber mit allen normalen Schriftarten wie Arial, Mono, Comics, Verdana usw. Testen Sie mit Ihrer Schriftart.

Beispiel:

<div id="content" style="width: 100px">hello how are you? hello how are you? hello how are you?</div>
<script type="text/javascript">
$(document).ready(function(){

  calculate = function(obj){
    other = obj.clone();
    other.html('a<br>b').hide().appendTo('body');
    size = other.height() / 2;
    other.remove();
    return obj.height() /  size;
  }

  n = calculate($('#content'));
  alert(n + ' lines');
});
</script>

Ergebnis: 6 Lines

Funktioniert in allen Browsern ohne seltene Funktionen außerhalb der Standards.

Überprüfen Sie: https://jsfiddle.net/gzceamtr/

e-info128
quelle

Zunächst möchte ich mich ganz herzlich bei Ihnen bedanken, genau das, wonach ich gesucht habe. Könnten Sie bitte jede Zeile der Berechnungsfunktion erklären? Vielen Dank im Voraus. SYA :)

LebCit

1

für diejenigen, die eine Nicht-jQuery-Antwort benötigen: clone→ cloneNode, hide→ style.visibility = "hidden", html('a<br>b')→ textContent='a\r\nb', appendTo('body')→ document.documentElement.appendChild, height()→getBoundingClientRect().height

Eric

Da ich einen Fehler von 1px zwischen Zeilenhöhe und Div-Höhe erhalte, empfehle ich diese Antwort. Dies und @ Jeffs Antwort zu kombinieren wird noch besser sein

Eric

6

Für diejenigen, die jQuery verwenden http://jsfiddle.net/EppA2/3/

function getRows(selector) {
    var height = $(selector).height();
    var line_height = $(selector).css('line-height');
    line_height = parseFloat(line_height)
    var rows = height / line_height;
    return Math.round(rows);
}

Penkovsky
quelle

jsfiddle.net/EppA2/9 ist weniger genau, aber nach dieser kann besser mit verschiedenen Browsern unterstützt werden

Penkovsky

8

Wenn jQuery "normal" von zurückgibt $(selector).css('line-height');, erhalten Sie keine Nummer aus dieser Funktion.

bafromca

5

Ich bin überzeugt, dass es jetzt unmöglich ist. Es war jedoch so.

Die Implementierung von getClientRects durch IE7 hat genau das getan, was ich will. Öffnen Sie diese Seite in IE8, aktualisieren Sie sie mit variierender Fensterbreite und sehen Sie, wie sich die Anzahl der Zeilen im ersten Element entsprechend ändert. Hier sind die wichtigsten Zeilen des Javascript von dieser Seite:

var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));

Leider gibt Firefox für mich immer ein Client-Rechteck pro Element zurück, und IE8 macht jetzt dasselbe. (Die Seite von Martin Honnen funktioniert heute, weil der IE sie in der IE-kompatiblen Ansicht rendert. Drücken Sie im IE8 F12, um mit verschiedenen Modi zu spielen.)

Das ist traurig. Es sieht wieder so aus, als hätte die wörtliche, aber wertlose Implementierung der Spezifikation von Firefox die nützliche von Microsoft überzeugt. Oder vermisse ich eine Situation, in der neue getClientRects einem Entwickler helfen können?

Buti-Oxa
quelle

2

Wie von der Mozilla element.getClientRects Dokumentation, zumindest für Inline - Elemente der W3C - Spezifikation macht Ergebnis in einem rect für jede Textzeile - nicht ideal, aber wenigstens etwas.

Natevw

getClientRects (). length ist der richtige Weg. getComputedStyle () kann Werte wie "erben", "normal" und "auto" zurückgeben.

Binyamin

4

Basierend auf der Antwort von GuyPaddock von oben scheint dies für mich zu funktionieren

function getLinesCount(element) {
  var prevLH = element.style.lineHeight;
  var factor = 1000;
  element.style.lineHeight = factor + 'px';

  var height = element.getBoundingClientRect().height;
  element.style.lineHeight = prevLH;

  return Math.floor(height / factor);
}

Der Trick dabei ist, die Zeilenhöhe so stark zu erhöhen, dass alle Unterschiede zwischen Browser und Betriebssystem in der Art und Weise, wie Schriftarten gerendert werden, "verschluckt" werden

Es wurde mit verschiedenen Stilen und verschiedenen Schriftgrößen / Familien überprüft. Das einzige, was nicht berücksichtigt wird (da es in meinem Fall keine Rolle spielte), ist die Polsterung, die leicht zur Lösung hinzugefügt werden kann.

Maor Yosef
quelle

2

Nein, nicht zuverlässig. Es gibt einfach zu viele unbekannte Variablen

Welches Betriebssystem (verschiedene DPIs, Schriftartenvarianten usw.)?
Haben sie ihre Schriftgröße vergrößert, weil sie praktisch blind sind?
In Webkit-Browsern können Sie die Größe von Textfeldern nach Herzenslust ändern.

Die Liste geht weiter. Ich hoffe, dass es eines Tages eine solche Methode geben wird, um dies mit JavaScript zuverlässig zu erreichen, aber bis zu diesem Tag haben Sie kein Glück.

Ich hasse solche Antworten und hoffe, dass jemand mir das Gegenteil beweisen kann.

KyleFarris
quelle

3

Wenn Sie die Zeilen nach dem Rendern zählen, sind alle diese Unbekannten irrelevant. Ihr Punkt gilt natürlich, wenn Sie versuchen zu "schätzen", wie viele Zeilen der Browser beim Rendern des Textes verwendet.

Simon

Ich würde sagen, dass die Variable der Benutzer, die zoomen und / oder die Textgröße ändern, ignoriert werden kann. Ich habe noch nie eine Website gesehen, deren Design für die Fensterskalierung (nach dem Laden der Seite) oder das Ändern der Textgröße im Browser optimiert wurde. Daher denke ich nicht, dass dies wichtige Faktoren für diese spezielle Frage sind. Ich stimme jedoch zu, dass es keine zuverlässigen Lösungen gibt, nur die "Schätzungen", die auf Pixeln basieren, wie andere Leute betonten.

Kalko

2

Sie sollten in der Lage sein, die Länge zu teilen ('\ n') und die Zeilenumbrüche zu erhalten.

Update: Dies funktioniert unter FF / Chrome, aber nicht unter IE.

<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
    $(document).ready(function() {
        var arr = $("div").text().split('\n');
        for (var i = 0; i < arr.length; i++)
            $("div").after(i + '=' + arr[i] + '<br/>');
    });
</script>
</head>
<body>
<div>One
Two
Three</div>
</body>
</html>

Chad Grant
quelle

1

Probieren Sie es aus und lassen Sie uns wissen, wie das geht. Ich bin todernst und nicht sarkastisch. Sie können diesen Code in der FireBug-Konsole auf dieser Seite verwenden. var the_text = $ ('. welovestackoverflow p'). text (); var numlines = the_text.split ("\ n"). length; Alarm (numlines);

KyleFarris

3

Vielen Dank für diese Überraschung, ich wusste nicht, dass es möglich ist, aber das ist nicht was ich will. Jquery scheint harte Zeilenumbrüche in der Quelle zu zählen, und ich bin an automatischen Zeilenumbrüchen im Ergebnis interessiert. Bei Ihrem Div "One Two Three" sollte das Ergebnis 1 sein, da der Browser den gesamten Text in eine Zeile setzt.

Buti-Oxa

Dann habe ich deine Frage falsch verstanden. Sie möchten dann die berechnete Zeilenhöhe ermitteln.

Chad Grant

1

getClientRectsRückgabe der Client Rects wie diese , und wenn Sie die Linien erhalten möchten, verwenden Sie die Follow - Funktion wie diese

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

Defims
quelle

1

Ich habe einen Weg gefunden, die Zeilennummer zu berechnen, als ich einen HTML-Editor entwickelte. Die primäre Methode ist folgende:

Im IE können Sie getBoundingClientRects aufrufen. Jede Zeile wird als Rechteck zurückgegeben
In einem Webkit oder einer neuen Standard-HTML-Engine werden die Client-Rechtecke jedes Elements oder Knotens zurückgegeben. In diesem Fall können Sie jedes Rechteck vergleichen. Ich meine, jedes Rechteck muss das größte sein, sodass Sie die Rechtecke ignorieren können, deren Höhe kleiner ist (wenn Die Oberseite eines Rechtecks ist kleiner als die Unterseite und die Unterseite größer als die Bedingung. Die Bedingung ist erfüllt.)

Schauen wir uns also das Testergebnis an:

Das grüne Rechteck ist das größte Rechteck in jeder Reihe

Das rote Rechteck ist die Auswahlgrenze

Das blaue Rechteck ist die Grenze vom Anfang bis zur Auswahl nach dem Erweitern. Wir sehen, dass es möglicherweise größer als das rote Rechteck ist. Daher müssen wir den Boden jedes Rechtecks überprüfen, um zu begrenzen, dass es kleiner als der Boden des roten Rechtecks sein muss.

        var lineCount = "?";
        var rects;
        if (window.getSelection) {
            //Get all client rectangles from body start to selection, count those rectangles that has the max bottom and min top
            var bounding = {};
            var range = window.getSelection().getRangeAt(0);//As this is the demo code, I dont check the range count
            bounding = range.getBoundingClientRect();//!!!GET BOUNDING BEFORE SET START!!!

            //Get bounding and fix it , when the cursor is in the last character of lineCount, it may expand to the next lineCount.
            var boundingTop = bounding.top;
            var boundingBottom = bounding.bottom;
            var node = range.startContainer;
            if (node.nodeType !== 1) {
                node = node.parentNode;
            }
            var style = window.getComputedStyle(node);
            var lineHeight = parseInt(style.lineHeight);
            if (!isNaN(lineHeight)) {
                boundingBottom = boundingTop + lineHeight;
            }
            else {
                var fontSize = parseInt(style.fontSize);
                if (!isNaN(fontSize)) {
                    boundingBottom = boundingTop + fontSize;
                }
            }
            range = range.cloneRange();

            //Now we have enougn datas to compare

            range.setStart(body, 0);
            rects = range.getClientRects();
            lineCount = 0;
            var flags = {};//Mark a flags to avoid of check some repeat lines again
            for (var i = 0; i < rects.length; i++) {
                var rect = rects[i];
                if (rect.width === 0 && rect.height === 0) {//Ignore zero rectangles
                    continue;
                }
                if (rect.bottom > boundingBottom) {//Check if current rectangle out of the real bounding of selection
                    break;
                }
                var top = rect.top;
                var bottom = rect.bottom;
                if (flags[top]) {
                    continue;
                }
                flags[top] = 1;

                //Check if there is no rectangle contains this rectangle in vertical direction.
                var succ = true;
                for (var j = 0; j < rects.length; j++) {
                    var rect2 = rects[j];
                    if (j !== i && rect2.top < top && rect2.bottom > bottom) {
                        succ = false;
                        break;
                    }
                }
                //If succ, add lineCount 1
                if (succ) {
                    lineCount++;
                }
            }
        }
        else if (editor.document.selection) {//IN IE8 getClientRects returns each single lineCount as a rectangle
            var range = body.createTextRange();
            range.setEndPoint("EndToEnd", range);
            rects = range.getClientRects();
            lineCount = rects.length;
        }
        //Now we get lineCount here

Dexiang
quelle

1

Versuchen Sie diese Lösung:

function calculateLineCount(element) {
  var lineHeightBefore = element.css("line-height"),
      boxSizing        = element.css("box-sizing"),
      height,
      lineCount;

  // Force the line height to a known value
  element.css("line-height", "1px");

  // Take a snapshot of the height
  height = parseFloat(element.css("height"));

  // Reset the line height
  element.css("line-height", lineHeightBefore);

  if (boxSizing == "border-box") {
    // With "border-box", padding cuts into the content, so we have to subtract
    // it out
    var paddingTop    = parseFloat(element.css("padding-top")),
        paddingBottom = parseFloat(element.css("padding-bottom"));

    height -= (paddingTop + paddingBottom);
  }

  // The height is the line count
  lineCount = height;

  return lineCount;
}

Sie können es hier in Aktion sehen: https://jsfiddle.net/u0r6avnt/

Versuchen Sie, die Größe der Bedienfelder auf der Seite zu ändern (um die rechte Seite der Seite breiter oder kürzer zu machen), und führen Sie sie dann erneut aus, um festzustellen, ob zuverlässig festgestellt werden kann, wie viele Zeilen vorhanden sind.

Dieses Problem ist schwieriger als es aussieht, aber die meisten Schwierigkeiten kommen aus zwei Quellen:

Das Rendern von Text ist in Browsern zu niedrig, um direkt von JavaScript abgefragt zu werden. Selbst der Pseudo-Selektor CSS :: first-line verhält sich nicht ganz so wie andere Selektoren (Sie können ihn beispielsweise nicht invertieren, um das Styling auf alle außer der ersten Zeile anzuwenden ).
Der Kontext spielt eine große Rolle bei der Berechnung der Anzahl der Zeilen. Wenn beispielsweise die Zeilenhöhe in der Hierarchie des Zielelements nicht explizit festgelegt wurde, erhalten Sie möglicherweise "normal" als Zeilenhöhe zurück. Darüber hinaus wird das Element möglicherweise verwendet box-sizing: border-boxund unterliegt daher einer Auffüllung.

Mein Ansatz minimiert # 2, indem er die Kontrolle über die Linienhöhe direkt übernimmt und die Box-Größenmethode berücksichtigt, was zu einem deterministischeren Ergebnis führt.

GuyPaddock
quelle

1

In bestimmten Fällen, wie bei einem Link, der sich über mehrere Zeilen in nicht gerechtfertigtem Text erstreckt, können Sie die Zeilenanzahl und jede Koordinate jeder Zeile abrufen, wenn Sie Folgendes verwenden:

var rectCollection = object.getClientRects();

https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects

Dies funktioniert, weil jede Zeile auch nur geringfügig anders wäre. Solange sie es sind, werden sie vom Renderer als ein anderes "Rechteck" gezeichnet.

Firsh - LetsWP.io
quelle

0

Nach dem Vorschlag von @BobBrunius 2010 habe ich dies mit jQuery erstellt. Zweifellos könnte es verbessert werden, aber es kann einigen helfen.

$(document).ready(function() {

  alert("Number of lines: " + getTextLinesNum($("#textbox")));

});

function getTextLinesNum($element) {

  var originalHtml = $element.html();
  var words = originalHtml.split(" ");
  var linePositions = [];
        
  // Wrap words in spans
  for (var i in words) {
    words[i] = "<span>" + words[i] + "</span>";
  }
        
  // Temporarily replace element content with spans. Layout should be identical.
  $element.html(words.join(" "));
        
  // Iterate through words and collect positions of text lines
  $element.children("span").each(function () {
    var lp = $(this).position().top;
    if (linePositions.indexOf(lp) == -1) linePositions.push(lp);
  });
        
  // Revert to original html content
  $element.html(originalHtml);
        
  // Return number of text lines
  return linePositions.length;

}

#textbox {
  width: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="textbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
  <br>sed diam nonummy</div>

Erweitern Sie das Snippet

Josef
quelle

0

Sie können Elementhöhe und Elementhöhe mit vergleichen line-height: 0

function lineCount(elm) {
  const style = elm.getAttribute('style')
  elm.style.marginTop = 0
  elm.style.marginBottom = 0
  elm.style.paddingTop = 0
  elm.style.paddingBottom = 0
  const heightAllLine = elm.offsetHeight
  elm.style.lineHeight = 0
  const height1line = elm.offsetHeight
  const lineCount = Math.round(heightAllLine / height1line)
  elm.setAttribute('style', style)
  if (isNaN(lineCount)) return 0
  return lineCount
}

Yukulélé
quelle

Wie kann ich Textzeilen innerhalb eines DOM-Elements zählen? Kann ich?

Antworten: