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 ta có một div như vậy:
<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, 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, ngắt tự động có được biểu diễn trong DOM không?
Câu trả lời:
Nếu kích thước của div phụ thuộc vào nội dung (mà tôi giả sử là trường hợp từ mô tả của bạn) thì bạn có thể truy xuất chiều cao của div bằng cách sử dụng:
var divHeight = document.getElementById('content').offsetHeight;Và chia cho chiều cao dòng phông chữ:
document.getElementById('content').style.lineHeight;Hoặc để lấy chiều cao dòng nếu nó chưa được đặt rõ ràng:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");Bạn cũng sẽ cần phải tính đến khoảng cách giữa các dòng và khoảng cách giữa các dòng.
BIÊN TẬP
Kiểm tra hoàn toàn độc lập, đặt chiều cao dòng rõ ràng:
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(mà không được thiết lập một cách rõ ràng) sẽ được sử dụngwindow.getComputedStyle(element, null).getPropertyValue('line-height')
Một giải pháp là đặt mọi từ trong thẻ span bằng cách sử dụng script. Sau đó, nếu thứ nguyên Y của một thẻ span nhất định nhỏ hơn thứ nguyên của thẻ trước đó ngay lập tức thì ngắt dòng đã xảy ra.
Kiểm tra hàm getClientRects () có thể được sử dụng để đếm số 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ề một đối tượng DOM javascript. Số lượng 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 toàn bộ những việc nó có thể làm bằng cách thêm nó 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 số điều cần lưu ý là nó chỉ hoạt động nếu phần tử chứa nằm trong dòng, tuy nhiên bạn có thể bao quanh phần tử nội tuyến chứa phần tử khối để kiểm soát chiều rộng như sau:
<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 theo kiểu như vậy. Nó chỉ dành cho mục đích ví dụ.
Tôi không hài lòng với câu trả lời ở đây và các câu hỏi khác. Câu trả lời được xếp hạng cao nhất không tính đến paddinghoặc borderdo đó rõ ràng box-sizinglà cũng bỏ qua . Câu trả lời của tôi kết hợp một số kỹ thuật ở đây 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ó không hoàn hảo: Khi không có giá trị số nào có thể được truy xuất cho line-height(ví dụ normalhoặc inherit), nó chỉ sử dụng font-sizenhân với 1.2. Có lẽ ai đó 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 phong cách và trường hợp mà tôi đã ném vào nó.
jsFiddle để chơi xung quanh và thử nghiệm. Cũng 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>Nhân bản đối tượng container 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ả kiểu được áp dụng, chiều cao dòng, v.v. Bây giờ, hãy 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 vượt trội so với phần đệm, lề và đường viền, thật tuyệt khi tính toán chiều cao thực 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 hoạt động với tất cả các phông chữ bình thường, như Arial, mono, truyện tranh, Verdana, v.v. Hãy thử nghiệm với phông chữ của bạn.
Thí 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
Hoạt động trong tất cả các trình duyệt mà không có chức năng hiếm gặp ngoài tiêu chuẩn.
Kiểm tra: 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
Đố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);
}$(selector).css('line-height');, bạn sẽ không nhận được một số nào từ hàm đó.
Tôi tin chắc rằng điều đó là không thể bây giờ. Đó là, mặc dù.
Việc triển khai getClientRects của IE7 đã làm chính xác những gì tôi muốn. Mở trang này trong IE8, thử làm mới nó với chiều rộng cửa sổ khác nhau và xem số dòng trong phần tử đầu tiên thay đổi như thế nào. Đâ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 máy khách cho mỗi phần tử và IE8 hiện cũng làm như vậy. (Trang của Martin Honnen hoạt động ngày nay vì IE hiển thị nó trong chế độ xem compat của IE; nhấn F12 trong IE8 để chơi với các chế độ khác nhau.)
Chuyện này buồn. Có vẻ như một lần nữa việc triển khai thông số kỹ thuật theo nghĩa đen nhưng vô giá trị của Firefox đã chiến thắng thông số hữu í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?
dựa trên câu trả lời của GuyPaddock ở trên, điều này dường như phù hợp với 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);
}mẹo ở đây là tăng chiều cao dòng đến mức nó sẽ "nuốt chửng" bất kỳ sự khác biệt nào về trình duyệt / hệ điều hành trong 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 / họ phông chữ khác nhau chỉ có điều mà nó không tính đến (vì trong trường hợp của tôi thì điều đó không thành vấn đề), là phần đệm - có thể dễ dàng thêm vào giải pháp.
Không, không đáng tin cậy. Đơn giản là có quá nhiều biến không xác định
Danh sách cứ kéo dài. Một ngày nào đó, tôi hy vọng sẽ có một phương pháp thực hiện điều này một cách đáng tin cậy với JavaScript, nhưng cho đến khi ngày đó đến, bạn không gặp may.
Tôi ghét những câu trả lời kiểu này và tôi hy vọng ai đó có thể chứng minh tôi sai.
Bạn sẽ có thể tách ('\ n'). Chiều dài và 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 hoạt động trên 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>getClientRectstrả về các lệnh của ứng dụng khách như thế này và nếu bạn muốn lấy các dòng, hãy sử dụng hàm theo dõi như thế này
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 để xác định số dòng khi tôi phát triển một trình soạn thảo html. Phương pháp chính là:
Trong IE, bạn có thể gọi getBoundsClientRects, nó trả về mỗi dòng dưới dạng hình chữ nhật
Trong webkit hoặc công cụ html tiêu chuẩn mới, nó trả về mỗi phần tử hoặc các hình chữ nhật máy khách của nút, trong trường hợp này bạn có thể so sánh từng hình chữ nhật, ý tôi là mỗi hình chữ nhật phải có một hình chữ nhật là 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ó đỉnh của một hình chữ nhật nhỏ hơn nó và đáy lớn hơn nó, điều kiện là đúng.)
vì vậy hãy xem kết quả thử nghiệm:
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ừ lúc bắt đầu đến khi chọn sau khi mở rộng, chúng ta thấy nó có thể lớn hơn hình chữ nhật đỏ, vì vậy chúng ta phải kiểm tra từng đáy của hình chữ nhật để hạn chế nó phải nhỏ hơn đáy của hình chữ nhật đỏ.
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 hereHã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ể thấy nó hoạt động tại đây: https://jsfiddle.net/u0r6avnt/
Hãy thử thay đổi kích thước các ô trên trang (để làm cho phần bên phải của trang rộng hơn hoặc ngắn hơn) rồi chạy lại để xem nó có thể cho biết có bao nhiêu dòng một cách đáng tin cậy.
Vấn đề này khó hơn vẻ ngoài, nhưng phần lớn khó khăn đến từ hai nguồn:
Kết xuất văn bản ở mức quá thấp trong các trình duyệt để được truy vấn trực tiếp từ JavaScript. Ngay cả CSS :: bộ chọn giả dòng đầu tiên cũng không hoạt động giống như các bộ chọn khác (ví dụ: bạn không thể đảo ngược nó để áp dụng kiểu cho tất cả trừ dòng đầu tiên).
Bối cảnh đóng một vai trò quan trọng trong cách bạn tính toán số dòng. Ví dụ: nếu chiều cao dòng không được đặt rõ ràng trong hệ thống phân cấp của phần tử mục tiêu, bạn có thể lấy lại "bình thường" dưới dạng chiều cao dòng. Ngoài ra, phần tử có thể đang sử dụng box-sizing: border-boxvà do đó có thể được đệm.
Cách tiếp cận của tôi giảm thiểu # 2 bằng cách kiểm soát trực tiếp chiều cao dòng và tính thừa số trong phương pháp định cỡ hộp, dẫn đến kết quả xác định hơn.
Trong một số trường hợp nhất định, chẳng hạn như một liên kết kéo dài qua nhiều hàng trong văn bản không căn đều, bạn có thể nhận được số hàng và mọi tọa độ của mỗi dòng, khi bạn sử dụng điều này:
var rectCollection = object.getClientRects();https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
Điều này hoạt động bởi vì mỗi dòng sẽ khác nhau thậm chí rất ít. Miễn là chúng được vẽ như một "hình chữ nhật" khác bởi trình kết xuất.
Theo gợi ý @BobBrunius 2010, tôi đã tạo điều này bằng jQuery. Không nghi ngờ gì nữa, 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>Bạn có thể so sánh chiều cao phần tử 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
}