Örneğin bir div içindeki satırları saymanın bir yolu olup olmadığını merak ediyorum. Diyelim ki böyle bir div var:
<div id="content">hello how are you?</div>Birçok faktöre bağlı olarak, div bir veya iki hatta dört satırlık bir metne sahip olabilir. Senaryoyu bilmenin bir yolu var mı?
Başka bir deyişle, otomatik aralar DOM'da temsil ediliyor mu?
Yanıtlar:
Div'in boyutu içeriğe bağlıysa (açıklamanıza göre durum böyle olduğunu varsayıyorum), o zaman div'in yüksekliğini şu şekilde alabilirsiniz:
var divHeight = document.getElementById('content').offsetHeight;Ve yazı tipi satır yüksekliğine bölün:
document.getElementById('content').style.lineHeight;Veya açıkça ayarlanmamışsa satır yüksekliğini almak için:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");Ayrıca doldurma ve satırlar arası boşlukları da hesaba katmanız gerekecektir.
DÜZENLE
Tamamen bağımsız test, açıkça satır yüksekliğini ayarlama:
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(açıkça belirlenmemiş olan) daha iyi bir yöntem kullanmak olacaktırwindow.getComputedStyle(element, null).getPropertyValue('line-height')
Çözümlerden biri, komut dosyası kullanarak her kelimeyi bir span etiketi içine almaktır. Daha sonra, belirli bir aralık etiketinin Y boyutu, öncekinden daha küçükse, bir satır sonu oluşmuştur.
Bir öğedeki satır sayısını saymak için kullanılabilen getClientRects () işlevine bakın . İşte nasıl kullanılacağına dair bir örnek.
var message_lines = $("#message_container")[0].getClientRects();Bir javascript DOM nesnesi döndürür. Bunu yaparak çizgilerin miktarı öğrenilebilir:
var amount_of_lines = message_lines.length;Her satırın yüksekliğini ve daha fazlasını döndürebilir. Bunu komut dosyanıza ekleyip ardından konsol günlüğünüze bakarak yapabileceği şeylerin tamamını görün.
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");Unutulmaması gereken birkaç nokta, yalnızca içeren öğe satır içi olduğunda işe yarasa da, genişliği şu şekilde kontrol etmek için içeren satır içi öğeyi bir blok öğesiyle çevreleyebilirsiniz:
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>Yine de stili bu şekilde kodlamayı önermiyorum. Bu sadece örnek amaçlıdır.
Buradaki ve diğer sorulardaki cevaplardan memnun değildim. En yüksek puan alan cevap, dikkate almaz paddingveya borderhesaba katmaz ve bu nedenle de açıkça görmezden gelir box-sizing. Cevabım, tatmin edici bir çözüm bulmak için burada ve diğer konularda bazı teknikleri birleştiriyor.
Mükemmel değil: line-height(örneğin normalveya inherit) için hiçbir sayısal değer alınamadığında , sadece font-sizeçarpılanı kullanır 1.2. Belki başka biri bu gibi durumlarda piksel değerini tespit etmek için güvenilir bir yol önerebilir.
Bunun dışında, attığım stillerin ve davaların çoğunu doğru bir şekilde idare edebildi.
jsFiddle oyun oynamak ve test etmek için. Ayrıca aşağıda satır içi.
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>Kap nesnesini klonlayın ve 2 harf yazın ve yüksekliği hesaplayın. Bu, tüm stil uygulanmış olarak gerçek yüksekliği döndürür, satır yüksekliği, vb. Şimdi yükseklik nesnesini / bir harfin boyutunu hesaplayın. Jquery'de yükseklik dolguyu, kenar boşluğunu ve bordürü aşar, her satırın gerçek yüksekliğini hesaplamak harikadır:
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() / size;Her harfin farklı yüksekliğine sahip nadir bir yazı tipi kullanırsanız, bu işe yaramaz. Ancak Arial, mono, çizgi roman, Verdana vb. Gibi tüm normal yazı tipleriyle çalışır. Yazı tipinizle test edin.
Misal:
<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>Sonuç: 6 Lines
Standartların dışında nadir işlevler olmadan tüm tarayıcılarda çalışır.
Kontrol edin: 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
JQuery kullananlar için 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');, bu işlevden bir sayı alamazsınız.
Şimdi bunun imkansız olduğuna ikna oldum. Yine de öyleydi.
IE7'nin getClientRects uygulaması tam olarak istediğimi yaptı. Bu sayfayı IE8'de açın , pencere genişliğini değiştirerek yenilemeyi deneyin ve buna göre ilk elemandaki satır sayısının nasıl değiştiğini görün. İşte o sayfadaki javascript'in ana satırları:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));Ne yazık ki benim için, Firefox her zaman öğe başına bir istemci dikdörtgeni döndürüyor ve IE8 de şimdi aynısını yapıyor. (Martin Honnen'in sayfası bugün çalışıyor çünkü IE onu IE uyumlu görünümde sunuyor; farklı modlarda oynamak için IE8'de F12'ye basın.)
Bu üzücü. Görünüşe göre bir kez daha Firefox'un gerçek ama değersiz spesifikasyon uygulaması, Microsoft'un kullanışlı olanına göre kazandı. Veya yeni getClientRects'in bir geliştiriciye yardımcı olabileceği bir durumu özlüyor muyum?
GuyPaddock'un yukarıdaki cevabına göre, bu benim için işe yarıyor gibi görünüyor
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);
}Buradaki hile, satır yüksekliğini o kadar artırmaktır ki, yazı tiplerini oluştururken tarayıcı / işletim sistemi farklılıklarını "yutar".
Çeşitli stiller ve farklı yazı tipi boyutları / aileleri ile kontrol ettim, hesaba katmadığı tek şey (benim durumumda önemli olmadığı için), çözüme kolayca eklenebilen dolgu.
Hayır, güvenilir değil. Çok fazla bilinmeyen değişken var
Liste devam ediyor. Umarım bir gün bunu JavaScript ile güvenilir bir şekilde başarmanın böyle bir yöntemi olur, ama o gün gelene kadar şansınız tükeniyor.
Bu tür cevaplardan nefret ediyorum ve umarım birisi beni yanlış kanıtlayabilir.
('\ N') uzunluğunu bölebilmeli ve satır sonlarını alabilmelisiniz.
güncelleme: bu FF / Chrome'da çalışır ancak IE'de çalışmaz.
<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>getClientRectsgibi istemci rects dönmek bu ve satırları almak istiyorsanız, gibi takip işlevini kullanın bu
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;
}Bir html editörü geliştirdiğimde satır numarasını hesaplamanın bir yolunu buldum. Birincil yöntem şudur:
IE'de getBoundingClientRects'i çağırabilirsiniz, her satırı bir dikdörtgen olarak döndürür
Webkit veya yeni standart html motorunda, her bir öğenin veya düğümün istemci dikdörtgenlerini döndürür, bu durumda her bir dikdörtgeni karşılaştırabilirsiniz, yani her biri bir dikdörtgen olmalıdır, böylece yüksekliği daha küçük olan dikdörtgenleri göz ardı edebilirsiniz (eğer Bir dikdörtgenin üstü ondan daha küçük ve altı ondan daha büyükse, koşul doğrudur.
öyleyse test sonucunu görelim:
Yeşil dikdörtgen, her satırdaki en büyük dikdörtgendir
Kırmızı dikdörtgen, seçim sınırıdır
Mavi dikdörtgen, genişledikten sonra başlangıçtan seçime kadar olan sınırdır, kırmızı dikdörtgenden daha büyük olabileceğini görüyoruz, bu nedenle her dikdörtgenin altını kontrol ederek sınırlandırmak için kırmızı dikdörtgenin altından daha küçük olması gerekir.
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 hereBu çözümü deneyin:
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;
}Burada eylem halinde görebilirsiniz: https://jsfiddle.net/u0r6avnt/
Sayfadaki panelleri yeniden boyutlandırmayı deneyin (sayfanın sağ tarafını genişletmek veya kısaltmak için) ve ardından kaç satır olduğunu güvenilir bir şekilde söyleyebildiğini görmek için tekrar çalıştırın.
Bu sorun göründüğünden daha zor, ancak zorluğun çoğu iki kaynaktan geliyor:
Tarayıcılarda metin oluşturma, doğrudan JavaScript'ten sorgulanamayacak kadar düşük düzeydedir. Hatta CSS :: ilk basamak sözde seçici oldukça diğer seçicileri gibi davranmaz (bunun invert, örneğin, herkese stil uygulamak için can not do ama ilk satırında).
Bağlam, satır sayısını hesaplamada büyük rol oynar. Örneğin, hedef öğenin hiyerarşisinde satır yüksekliği açıkça ayarlanmadıysa, satır yüksekliği olarak "normal" geri alabilirsiniz. Ek olarak, öğe kullanıyor olabilir box-sizing: border-boxve bu nedenle dolguya tabi olabilir .
Yaklaşımım, satır yüksekliğini doğrudan kontrol ederek ve kutu boyutlandırma yöntemini hesaba katarak # 2'yi en aza indirerek daha belirleyici bir sonuca yol açar.
Yaslanmamış metinde birden çok satıra yayılan bir bağlantı gibi belirli durumlarda, bunu kullandığınızda satır sayısını ve her satırın her koordinatını alabilirsiniz:
var rectCollection = object.getClientRects();https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
Bu işe yarar çünkü her satır çok az da olsa farklı olacaktır. Oldukları sürece, oluşturucu tarafından farklı bir "dikdörtgen" olarak çizilirler.
@ BobBrunius 2010 önerisini takiben bunu jQuery ile oluşturdum. Hiç şüphe yok ki geliştirilebilir ama bazılarına yardımcı olabilir.
$(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>Eleman yüksekliğini ve eleman yüksekliğini şununla karşılaştırabilirsiniz: 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
}