Tôi tự hỏi nếu có cách nào để đếm các dòng bên trong một div chẳng hạn. Giả sử chúng tôi có một div như vậy:Làm cách nào để đếm các dòng văn bản bên trong phần tử DOM? Tôi có thể?
<div id="content">hello how are you?</div>
Tùy thuộc vào nhiều yếu tố, div có thể có một hoặc hai hoặc thậm chí bốn dòng văn bản. Có cách nào để kịch bản biết không?
Nói cách khác, các ngắt tự động có được biểu thị bằng DOM không?
Tôi tin rằng điều đó là không thể. Đó là, mặc dù.
Triển khai của IE7 về getClientRects thực hiện chính xác những gì tôi muốn. Mở this page trong IE8, hãy thử làm mới chiều rộng cửa sổ khác nhau và xem số lượng dòng trong phần tử đầu tiên thay đổi tương ứng như thế nào.Dưới đây là các dòng chính của javascript từ trang đó:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));
Thật không may cho tôi, Firefox luôn trả về một hình chữ nhật của khách hàng cho mỗi phần tử và IE8 hiện giống nhau. (Trang của Martin Honnen hoạt động ngày hôm nay vì IE hiển thị trong chế độ xem tương thích của IE; nhấn F12 trong IE8 để phát với các chế độ khác nhau.)
Điều này thật đáng buồn. Có vẻ như một lần nữa, việc thực hiện bằng chữ đen nhưng vô giá trị của Firefox đã giành được lợi ích của Microsoft. Hay tôi bỏ lỡ một tình huống mà getClientRects mới có thể giúp một nhà phát triển?
Nếu kích thước của div là phụ thuộc vào nội dung (mà tôi giả định là trường hợp từ mô tả của bạn) sau đó bạn có thể lấy chiều cao của div sử dụng:
var divHeight = document.getElementById('content').offsetHeight;
Và chia cho chiều cao dòng chữ:
document.getElementById('content').style.lineHeight;
Hoặc để có được chiều cao dòng nếu nó chưa được thiết lập một cách rõ ràng:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");
Bạn cũng sẽ cần phải có khoảng đệm và khoảng cách giữa các dòng.
EDIT
hoàn toàn khép kín kiểm tra, rõ ràng thiết line-height:
function countLines() {
var divHeight = document.getElementById('content').offsetHeight
var lineHeight = parseInt(document.getElementById('content').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>Đó là một khởi đầu tốt đẹp ngoại trừ việc các line-height có thể không phải lúc nào đã được thiết lập. Bạn sẽ nhận được điều đó từ phong cách tính toán của phần tử. –
Ta, được cập nhật để bao gồm kiểu tính toán – Pool
Trên suy nghĩ thứ hai, chiều cao dòng không nhất thiết phải là số (hoặc theo pixel). Vì vậy, nếu mã của bạn dựa vào nó và quy ước CSS của bạn cho phép nó, bạn có lẽ nên đặt chiều cao dòng theo pixel. –
Không, không đáng tin cậy. Chỉ đơn giản là có quá nhiều biến không xác định
Danh sách tiếp tục. Một ngày nào đó tôi hy vọng sẽ có một phương pháp đáng tin cậy để hoàn thành điều này với JavaScript, nhưng cho đến ngày đó đến, bạn sẽ gặp may mắn.
Tôi ghét các loại câu trả lời này và tôi hy vọng một người nào đó có thể chứng minh tôi sai.
Nếu bạn đếm các dòng sau khi hiển thị, tất cả các ẩn đó không liên quan. Điểm của bạn áp dụng, tất nhiên, nếu bạn cố gắng "guesstimate" bao nhiêu dòng trình duyệt sử dụng khi hiển thị văn bản. – simon
Tôi muốn nói rằng biến người dùng phóng to và/hoặc thay đổi kích thước văn bản có thể bị bỏ qua. Tôi chưa bao giờ thấy một trang web có thiết kế được tối ưu hóa để phù hợp với quy mô cửa sổ (sau khi tải trang) hoặc thay đổi kích thước trình duyệt văn bản, vì vậy tôi không nghĩ đó là những yếu tố quan trọng trong câu hỏi cụ thể này. Tuy nhiên tôi đồng ý không có giải pháp đáng tin cậy, chỉ là "guesstimations" dựa trên pixel như những người khác đã chỉ ra. – Kalko
Bạn sẽ có thể chia tách ('\ n') .độ dài và nhận được ngắt dòng.
cập nhật: tính năng này hoạt động trên FF/Chrome nhưng không phải là 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>
Hãy thử và cho chúng tôi biết cách thực hiện. Tôi đã chết nghiêm trọng, không mỉa mai. Bạn có thể sử dụng mã này trong giao diện điều khiển của FireBug trên trang này. var the_text = $ ('. welovestackoverflow p'). văn bản(); chiều dài var numlines = the_text.split ("\ n"); cảnh báo (số); – KyleFarris
Cảm ơn sự bất ngờ này, tôi không biết điều đó là có thể, nhưng đây không phải là điều tôi muốn. Jquery dường như đếm các ngắt dòng cứng trong nguồn và tôi quan tâm đến ngắt dòng tự động trong kết quả. Trong trường hợp của div "One Two Three", kết quả sẽ là 1, bởi vì trình duyệt đặt tất cả văn bản vào một dòng. –
Sau đó, tôi hiểu lầm câu hỏi của bạn. Bạn muốn tìm chiều cao dòng được tính toán sau đó. –
Một giải pháp là bao gồm mọi từ trong thẻ span sử dụng tập lệnh. Sau đó, nếu kích thước Y của một thẻ span đã cho nhỏ hơn giá trị của người tiền nhiệm trước đó thì một ngắt dòng đã xảy ra.
Thông minh! Làm thế nào để bạn làm điều đó? Tôi đoán bạn giả sử đoạn văn bản chỉ (như tôi có trong ví dụ). Tôi đã không có giới hạn này trong tâm trí, nhưng nó có thể được OK, miễn là kịch bản không sụp đổ khi có cái gì khác bên trong đoạn văn. –
Trên suy nghĩ thứ hai, phương pháp này thất bại nếu có các nhịp thẳng đứng theo chiều dọc trong dòng. Vì vậy, ngay cả đoạn văn bản chỉ có thể được tính sai. –
div của tôi có văn bản và hình ảnh ... may mắn là những hình ảnh được đặt hoàn toàn vì vậy tôi nghĩ rằng chúng sẽ bị loại trừ. : D Dù sao tôi đã sử dụng cùng một mã bạn đề xuất nhưng với một div không phải là một khoảng, cảm ơn bạn mặc dù +1! –
Đối với những người sử dụng 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);
}
http://jsfiddle.net/EppA2/9/ ít chính xác hơn, nhưng theo [this] (http://stackoverflow.com/questions/1185151/how-to-determine-a-line-height-using- javascript-jquery) có thể được hỗ trợ tốt hơn bởi các trình duyệt khác nhau – penkovsky
Khi jQuery trả về "bình thường" từ '$ (selector) .css ('line-height');', bạn sẽ không nhận được một số từ hàm đó. – bafromca
Kiểm tra chức năng getClientRects() mà có thể được sử dụng để đếm số lượng các dòng trong một phần tử. Đây là một ví dụ về cách sử dụng nó.
var message_lines = $("#message_container")[0].getClientRects();
Nó trả về đối tượng DOM JavaScript. Số lượng các dòng có thể được biết bằng cách thực hiện điều này:
var amount_of_lines = message_lines.length;
Nó có thể trả về chiều cao của mỗi dòng và hơn thế nữa. Xem đầy đủ các thứ mà nó có thể thực hiện bằng cách thêm vào tập lệnh của bạn, sau đó tìm trong nhật ký bảng điều khiển của bạn.
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");
Mặc dù một vài điều cần lưu ý là nó chỉ hoạt động nếu các yếu tố chứa là nội tuyến, tuy nhiên bạn có thể bao quanh các yếu tố inline chứa với một yếu tố ngăn chặn để kiểm soát chiều rộng như vậy:
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>
Mặc dù tôi không khuyên bạn nên viết mã cứng kiểu như thế. Nó chỉ cho mục đích ví dụ.
Điều này và câu trả lời khác dựa trên getClientRects tốt hơn nhiều so với bài đăng được trợ giúp – matteo
Sau @BobBrunius 2010 đề xuất tôi đã tạo điều này với jQuery. Không nghi ngờ gì nó có thể được cải thiện nhưng nó có thể giúp một số.
$(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>getClientRects trở lại các hình chữ nhật client như this và nếu bạn muốn để có được những đường nét, sử dụng chức năng theo như this
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;
}
Tôi tìm thấy một cách để calc dòng khi tôi phát triển trình soạn thảo html. Các phương pháp chính là:
Trong IE bạn có thể gọi getBoundingClientRects, nó sẽ trả mỗi dòng như một hình chữ nhật
Trong webkit hoặc động cơ html tiêu chuẩn mới, nó sẽ trả mỗi phần tử hoặc khách hàng nút của hình chữ nhật, trong trường hợp này, bạn có thể so sánh từng hình chữ nhật , nghĩa là mỗi hình chữ nhật phải lớn nhất, vì vậy, bạn có thể bỏ qua những hình chữ nhật có chiều cao nhỏ hơn (nếu có một hình chữ nhật nhỏ hơn và lớn hơn nó, điều kiện là đúng)
vì vậy hãy xem kết quả kiểm tra:.
Hình chữ nhật màu xanh lá cây là hình chữ nhật lớn nhất trong mỗi hàng
Hình chữ nhật màu đỏ là ranh giới lựa chọn
Hình chữ nhật màu xanh là ranh giới từ bắt đầu đến lựa chọn sau khi mở rộng, chúng tôi thấy nó có thể lớn hơn màu đỏ r ectangle, vì vậy chúng ta phải kiểm tra đáy của mỗi hình chữ nhật để hạn chế nó phải nhỏ hơn đáy hình chữ nhật màu đỏ.
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
Tôi không hài lòng với câu trả lời ở đây và về các câu hỏi khác. Câu trả lời được xếp hạng cao nhất không mất padding hoặc border vào tài khoản và do đó rõ ràng bỏ qua box-sizing. Câu trả lời của tôi kết hợp một số kỹ thuật ở đây và và trên các chủ đề khác để có được một giải pháp phù hợp với sự hài lòng của tôi.
Nó isnt hoàn hảo: Khi không có giá trị bằng số đã có thể được lấy ra cho line-height (ví dụ normal hoặc inherit), nó chỉ sử dụng font-size nhân 1.2. Có lẽ người khác có thể đề xuất một cách đáng tin cậy để phát hiện giá trị pixel trong những trường hợp đó.
Ngoài ra, nó có thể xử lý chính xác hầu hết các kiểu và trường hợp tôi đã ném vào đó.
jsFiddle để chơi xung quanh và thử nghiệm. Ngoài ra nội tuyến bên dướ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>hữu ích ... Cảm ơn bạn – Sinto
Xem xét tốt, nhưng trong trường hợp của tôi, chiều cao của một dòng div cao hơn chiều cao dòng 1px, không có bất kỳ phần đệm nào và biên giới. Vì vậy, nhận được chiều cao dòng bằng cách chải câu trả lời của bạn và câu trả lời @ e-info128 (phương pháp cloneNode) có thể là một lựa chọn tốt hơn – Eric
Hãy thử giải pháp này:
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;
}
Bạn có thể nhìn thấy nó trong hành động ở đây: https://jsfiddle.net/u0r6avnt/
Hãy thử thay đổi kích thước các tấm trên trang (để làm cho phía bên phải của trang rộng hơn hoặc ngắn hơn) và sau đó chạy lại để xem nó có thể đáng tin cậy cho biết có bao nhiêu dòng.
Vấn đề này là khó hơn bạn tưởng, nhưng hầu hết các khó khăn xuất phát từ hai nguồn:
bản vẽ quá mức độ thấp trong các trình duyệt để được truy vấn trực tiếp từ JavaScript. Ngay cả CSS :: dòng đầu tiên giả chọn không hành xử khá giống như các bộ chọn khác làm (bạn không thể đảo ngược nó, ví dụ, để áp dụng kiểu dáng cho tất cả nhưng dòng đầu tiên).
Ngữ cảnh đóng vai trò quan trọng trong cách bạn tính số dòng. Ví dụ: nếu chiều cao dòng không được đặt rõ ràng trong cấu trúc phân cấp của phần tử đích, bạn có thể nhận được "bình thường" trở lại dưới dạng chiều cao dòng. Ngoài ra, phần tử có thể đang sử dụng box-sizing: border-box và do đó phải chịu sự đệm.
Cách tiếp cận của tôi giảm thiểu số 2 bằng cách kiểm soát chiều cao dòng trực tiếp và bao thanh toán trong phương pháp định cỡ hộp, dẫn đến kết quả xác định hơn.
Sao chép đối tượng vùng chứa và viết 2 chữ cái và tính chiều cao. Điều này trả về chiều cao thực với tất cả các kiểu được áp dụng, chiều cao dòng, vv. Bây giờ, tính toán đối tượng chiều cao/kích thước của một chữ cái. Trong Jquery, chiều cao excelude padding, margin và biên giới, nó là rất tốt để tính toán chiều cao thực sự của mỗi dòng:
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height()/2;
other.remove();
lines = obj.height()/size;
Nếu bạn sử dụng một phông chữ hiếm với chiều cao khác nhau của mỗi chữ cái, điều này không hoạt động. Nhưng làm việc với tất cả các phông chữ bình thường, như Arial, mono, truyện tranh, Verdana, vv Kiểm tra với phông chữ của bạn.
Ví dụ:
<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>
Kết quả: 6 Lines
trình trong tất cả các trình duyệt mà không cần chức năng hiếm ra các tiêu chuẩn.
Kiểm tra: https://jsfiddle.net/gzceamtr/
Trước hết, tôi muốn nói cảm ơn bạn rất nhiều, chỉ là những gì tôi đang tìm kiếm. Bạn có thể giải thích từng dòng của hàm tính toán được không. Cảm ơn rất nhiều trước. SYA :) – LebCit
Đã tìm ra, ** GENIUS **, cảm ơn lần nữa :) – LebCit
cho những ai cần câu trả lời không phải jQuery: 'clone' →' cloneNode', 'hide' →' style.visibility = "hidden" ', 'html ('a
b')' → 'textContent = 'a \ r \ nb'',' appendTo (' nội dung ') '→' document.documentElement.appendChild', 'height()' → 'getBoundingClientRect(). height' –
Eric
dựa trên câu trả lời GuyPaddock của từ trên cao, điều này dường như làm việc cho tôi
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);
}
thủ thuật ở đây là tăng line-height rất nhiều mà nó sẽ "nuốt" bất kỳ sự khác biệt về trình duyệt/hệ điều hành theo cách chúng hiển thị phông chữ
Kiểm tra nó với nhiều kiểu khác nhau và kích thước phông chữ khác nhau/gia đình điều duy nhất mà nó không tính đến (vì trong trường hợp của tôi nó không phải là ma tter), là phần đệm - có thể dễ dàng được thêm vào giải pháp.
Bạn có thể so sánh yếu tố chiều cao và chiều cao phần tử với 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
}
Như được chỉ ra bởi tài liệu [element.getClientRects] của Mozilla (https://developer.mozilla.org/en/DOM/element.getClientRects), ít nhất là đối với các phần tử _inline_, đặc tả W3C * * kết quả trong một rect cho mỗi dòng văn bản - không lý tưởng, nhưng ít nhất là điều gì đó. – natevw
getClientRects() là chiều dài chính xác. getComputedStyle() có thể trả về các giá trị như "kế thừa", "bình thường" và "tự động". – Binyamin