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?
Antworten:
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>line-height(die nicht explizit festgelegt ist), wäre die Verwendung vonwindow.getComputedStyle(element, null).getPropertyValue('line-height')
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.
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.
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>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/
clone→ cloneNode, hide→ style.visibility = "hidden", html('a<br>b')→ textContent='a\r\nb', appendTo('body')→ document.documentElement.appendChild, height()→getBoundingClientRect().height
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);
}
$(selector).css('line-height');, erhalten Sie keine Nummer aus dieser Funktion.
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?
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.
Nein, nicht zuverlässig. Es gibt einfach zu viele unbekannte Variablen
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.
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>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;
}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 hereVersuchen 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.
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.
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>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
}