Saya bertanya-tanya apakah ada cara untuk menghitung baris di dalam div misalnya. Katakanlah kita memiliki div seperti ini:
<div id="content">hello how are you?</div>Bergantung pada banyak faktor, div dapat memiliki satu, atau dua, atau bahkan empat baris teks. Apakah ada cara untuk mengetahui skrip?
Dengan kata lain, apakah jeda otomatis terwakili di DOM?
Jawaban:
Jika ukuran div bergantung pada konten (yang saya anggap kasus dari deskripsi Anda) maka Anda dapat mengambil tinggi div menggunakan:
var divHeight = document.getElementById('content').offsetHeight;Dan bagi dengan tinggi garis font:
document.getElementById('content').style.lineHeight;Atau untuk mendapatkan tinggi baris jika belum diatur secara eksplisit:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");Anda juga perlu mempertimbangkan padding dan antar-baris.
EDIT
Tes mandiri sepenuhnya, secara eksplisit menyetel tinggi baris:
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(yang tidak diatur secara eksplisit) adalah dengan menggunakanwindow.getComputedStyle(element, null).getPropertyValue('line-height')
Salah satu solusinya adalah memasukkan setiap kata dalam tag span menggunakan script. Kemudian jika dimensi Y dari tag span tertentu lebih kecil daripada dimensi Y dari tag span yang diberikan sebelumnya, maka baris baru telah terjadi.
Lihat fungsi getClientRects () yang bisa digunakan untuk menghitung jumlah baris dalam sebuah elemen. Berikut ini contoh cara menggunakannya.
var message_lines = $("#message_container")[0].getClientRects();Ini mengembalikan objek DOM javascript. Jumlah garis dapat diketahui dengan melakukan ini:
var amount_of_lines = message_lines.length;Itu dapat mengembalikan ketinggian setiap baris, dan banyak lagi. Lihat berbagai hal yang dapat dilakukan dengan menambahkan ini ke skrip Anda, lalu cari di log konsol Anda.
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");Meskipun beberapa hal yang perlu diperhatikan adalah ini hanya berfungsi jika elemen penampungnya sebaris, namun Anda dapat mengelilingi elemen inline penampung dengan elemen blok untuk mengontrol lebarnya seperti ini:
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>Meskipun saya tidak merekomendasikan pengkodean keras gaya seperti itu. Itu hanya untuk tujuan contoh.
Saya tidak puas dengan jawaban di sini dan pertanyaan lain. Jawaban berperingkat tertinggi tidak memperhitungkan paddingatau bordermemperhitungkan, dan karena itu jelas mengabaikan box-sizingjuga. Jawaban saya menggabungkan beberapa teknik di sini dan dan di utas lainnya untuk mendapatkan solusi yang sesuai dengan kepuasan saya.
Ini tidak sempurna: Ketika tidak ada nilai numerik yang dapat diambil untuk line-height(misalnya normalatau inherit), ini hanya menggunakan font-sizedikalikan dengan 1.2. Mungkin orang lain dapat menyarankan cara yang andal untuk mendeteksi nilai piksel dalam kasus tersebut.
Selain itu, ia mampu menangani dengan benar sebagian besar gaya dan kasing yang telah saya lemparkan.
jsFiddle untuk bermain-main dan menguji. Juga sebaris di bawah.
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>Kloning objek kontainer dan tulis 2 huruf dan hitung tingginya. Ini mengembalikan tinggi sebenarnya dengan semua gaya diterapkan, tinggi garis, dll. Sekarang, hitung tinggi objek / ukuran huruf. Di Jquery, tingginya melebihi padding, margin, dan border, sangat bagus untuk menghitung tinggi sebenarnya dari setiap baris:
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() / size;Jika Anda menggunakan font langka dengan tinggi yang berbeda untuk setiap huruf, ini tidak berhasil. Tetapi bekerja dengan semua font normal, seperti Arial, mono, komik, Verdana, dll. Uji dengan font Anda.
Contoh:
<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>Hasil: 6 Lines
Bekerja di semua browser tanpa fungsi langka di luar standar.
Periksa: 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
Bagi mereka yang menggunakan jQuery 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');, Anda tidak akan mendapatkan angka dari fungsi itu.
Saya yakin itu tidak mungkin sekarang. Tapi memang begitu.
Implementasi getClientRects dari IE7 melakukan apa yang saya inginkan. Buka halaman ini di IE8, coba muat ulang dengan lebar jendela yang bervariasi, dan lihat bagaimana jumlah baris pada elemen pertama berubah sesuai. Inilah baris kunci javascript dari halaman itu:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));Sayangnya bagi saya, Firefox selalu mengembalikan satu persegi panjang klien per elemen, dan IE8 melakukan hal yang sama sekarang. (Halaman Martin Honnen berfungsi hari ini karena IE membuatnya dalam tampilan compat IE; tekan F12 di IE8 untuk bermain dengan mode yang berbeda.)
Ini menyedihkan. Sepertinya sekali lagi implementasi spesifikasi Firefox yang literal tetapi tidak berharga menang atas aplikasi Microsoft yang berguna. Atau apakah saya melewatkan situasi di mana getClientRects baru dapat membantu pengembang?
berdasarkan jawaban GuyPaddock dari atas, ini sepertinya berhasil untuk saya
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);
}trik di sini adalah meningkatkan tinggi baris sedemikian rupa sehingga akan "menelan" perbedaan browser / OS apa pun dalam cara merender font
Memeriksa dengan berbagai gaya dan ukuran font / keluarga yang berbeda hanya hal yang tidak diperhitungkan (karena dalam kasus saya itu tidak masalah), adalah padding - yang dapat dengan mudah ditambahkan ke solusi.
Tidak, tidak bisa diandalkan. Ada terlalu banyak variabel yang tidak diketahui
Daftarnya terus berlanjut. Suatu hari nanti saya berharap akan ada metode yang andal untuk menyelesaikan ini dengan JavaScript, tetapi sampai hari itu tiba, Anda kurang beruntung.
Saya benci jawaban seperti ini dan saya berharap seseorang bisa membuktikan bahwa saya salah.
Anda harus bisa membagi panjang ('\ n') dan mendapatkan jeda baris.
update: ini berfungsi di FF / Chrome tetapi tidak di 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>getClientRectskembalikan klien rects seperti ini dan jika Anda ingin mendapatkan garis, gunakan fungsi ikuti seperti ini
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;
}Saya menemukan cara untuk menghitung nomor baris saat saya mengembangkan editor html. Metode utamanya adalah:
Di IE Anda dapat memanggil getBoundingClientRects, yang mengembalikan setiap baris sebagai persegi panjang
Di webkit atau mesin html standar baru, ia mengembalikan setiap elemen atau persegi panjang klien node, dalam hal ini Anda dapat membandingkan setiap persegi panjang, maksud saya setiap persegi panjang harus ada yang terbesar, jadi Anda dapat mengabaikan persegi panjang yang tingginya lebih kecil (jika ada bagian atas persegi panjang yang lebih kecil dari itu dan bagian bawah lebih besar darinya, kondisinya benar.)
jadi mari kita lihat hasil tesnya:
Persegi panjang hijau adalah persegi panjang terbesar di setiap baris
Persegi panjang merah adalah batas seleksi
Persegi panjang biru adalah batas dari awal hingga seleksi setelah meluas, kita melihatnya mungkin lebih besar dari persegi panjang merah, jadi kita harus memeriksa setiap bagian bawah persegi panjang untuk membatasinya harus lebih kecil dari bagian bawah persegi panjang merah.
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 hereCoba solusi ini:
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;
}Anda dapat melihatnya beraksi di sini: https://jsfiddle.net/u0r6avnt/
Coba ubah ukuran panel pada halaman (untuk membuat sisi kanan halaman lebih lebar atau lebih pendek) dan kemudian jalankan lagi untuk melihat bahwa panel dapat mengetahui berapa banyak garis yang ada.
Masalah ini lebih sulit daripada yang terlihat, tetapi sebagian besar kesulitan berasal dari dua sumber:
Penyajian teks terlalu rendah di browser untuk ditanyai langsung dari JavaScript. Bahkan pseudo-selector CSS :: first-line tidak berperilaku seperti penyeleksi lain (Anda tidak dapat membalikkannya, misalnya, untuk menerapkan gaya ke semua kecuali baris pertama).
Konteks memainkan peran besar dalam cara Anda menghitung jumlah garis. Misalnya, jika tinggi baris tidak secara eksplisit disetel dalam hierarki elemen target, Anda mungkin mendapatkan kembali "normal" sebagai tinggi baris. Selain itu, elemen tersebut mungkin menggunakan box-sizing: border-boxdan oleh karena itu tunduk pada bantalan.
Pendekatan saya meminimalkan # 2 dengan mengontrol ketinggian garis secara langsung dan memfaktorkan dalam metode ukuran kotak, yang mengarah ke hasil yang lebih deterministik.
Dalam kasus tertentu, seperti tautan yang membentang di beberapa baris dalam teks tidak rata, Anda bisa mendapatkan jumlah baris dan setiap koordinat dari setiap baris, saat Anda menggunakan ini:
var rectCollection = object.getClientRects();https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
Ini berfungsi karena setiap baris akan berbeda meskipun sedikit. Selama ada, mereka digambar sebagai "persegi panjang" yang berbeda oleh perender.
Mengikuti saran @BobBrunius 2010, saya membuat ini dengan jQuery. Tidak diragukan lagi ini dapat ditingkatkan tetapi mungkin membantu beberapa.
$(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>Anda dapat membandingkan tinggi elemen dan tinggi elemen dengan 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
}