मैं सोच रहा हूँ अगर वहाँ एक उदाहरण के लिए एक div के अंदर लाइनों की गणना करने का एक तरीका है। कहो हमारे पास एक div ऐसा है:
<div id="content">hello how are you?</div>कई कारकों के आधार पर, div में एक या दो, या पाठ की चार पंक्तियाँ हो सकती हैं। क्या स्क्रिप्ट को जानने का कोई तरीका है?
दूसरे शब्दों में, क्या डोम में स्वचालित ब्रेक का प्रतिनिधित्व किया जाता है?
जवाबों:
यदि div का आकार सामग्री पर निर्भर है (जिसे मैं आपके विवरण से मामला मानता हूं) तो आप div की ऊंचाई को पुनः प्राप्त कर सकते हैं:
var divHeight = document.getElementById('content').offsetHeight;और फ़ॉन्ट लाइन ऊंचाई से विभाजित करें:
document.getElementById('content').style.lineHeight;या लाइन ऊंचाई पाने के लिए अगर यह स्पष्ट रूप से सेट नहीं किया गया है:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");आपको पैडिंग और इंटर-लाइन रिक्ति को भी ध्यान में रखना होगा।
संपादित करें
पूरी तरह से आत्म-निहित परीक्षण, स्पष्ट रूप से लाइन-ऊंचाई सेट करना:
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(जो स्पष्ट रूप से सेट नहीं है) का उपयोग करना होगाwindow.getComputedStyle(element, null).getPropertyValue('line-height')
एक समाधान स्क्रिप्ट का उपयोग करते हुए हर शब्द को स्पैन टैग में संलग्न करना है। फिर यदि किसी दिए गए स्पैन टैग का Y आयाम तत्काल पूर्ववर्ती की तुलना में कम है तो लाइन ब्रेक हुआ है।
फ़ंक्शन getClientRects () देखें, जिसका उपयोग किसी तत्व में लाइनों की संख्या को गिनने के लिए किया जा सकता है। इसका उपयोग कैसे करें, इसका एक उदाहरण यहां दिया गया है।
var message_lines = $("#message_container")[0].getClientRects();यह एक जावास्क्रिप्ट डोमेन ऑब्जेक्ट लौटाता है। ऐसा करने से लाइनों की मात्रा ज्ञात की जा सकती है:
var amount_of_lines = message_lines.length;यह प्रत्येक पंक्ति की ऊंचाई, और अधिक वापस कर सकता है। इसे अपनी स्क्रिप्ट में जोड़कर कर सकते हैं चीजों की पूरी सरणी देखें, फिर अपने कंसोल लॉग में देख रहे हैं।
console.log("");
console.log("message_lines");
console.log(".............................................");
console.dir(message_lines);
console.log("");यद्यपि ध्यान देने योग्य कुछ बातें यह केवल तभी काम करती हैं यदि युक्त तत्व इनलाइन है, हालांकि आप चौड़ाई जैसे को नियंत्रित करने के लिए ब्लॉक तत्व वाले इनलाइन तत्व को घेर सकते हैं:
<div style="width:300px;" id="block_message_container">
<div style="display:inline;" id="message_container">
..Text of the post..
</div>
</div>हालांकि मैं उस तरह की हार्ड कोडिंग की सलाह नहीं देता। यह सिर्फ उदाहरण के लिए है।
मैं यहाँ और अन्य सवालों के जवाब से संतुष्ट नहीं था। उच्चतम रेट जवाब ले करता है नहीं paddingया borderखाते में है, और इसलिए स्पष्ट रूप से ध्यान नहीं देता है box-sizingके रूप में अच्छी तरह से। मेरा उत्तर कुछ तकनीकों को यहां और अन्य थ्रेड्स में जोड़ता है ताकि एक समाधान मिल सके जो मेरी संतुष्टि के लिए काम करता है।
यह बिल्कुल सही नहीं है: जब कोई संख्यात्मक मान line-height(जैसे normalया inherit) के लिए पुनर्प्राप्त करने में सक्षम नहीं था , तो यह सिर्फ font-sizeगुणा का उपयोग करता है 1.2। शायद कोई और उन मामलों में पिक्सेल मूल्य का पता लगाने के लिए एक विश्वसनीय तरीका सुझा सकता है।
इसके अलावा, यह मेरे द्वारा फेंकी गई अधिकांश शैलियों और मामलों को सही ढंग से संभालने में सक्षम है।
चारों ओर खेलने और परीक्षण के लिए jsFiddle । नीचे इनलाइन भी करें।
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>कंटेनर ऑब्जेक्ट को क्लोन करें और 2 अक्षर लिखें और ऊंचाई की गणना करें। यह लागू की गई सभी शैली, लाइन की ऊँचाई, आदि के साथ वास्तविक ऊँचाई को लौटाता है। अब, ऊँचाई वस्तु / अक्षर के आकार की गणना करें। Jquery में, ऊँचाई ने पैडिंग, मार्जिन और बॉर्डर को बाहर कर दिया, प्रत्येक पंक्ति की वास्तविक ऊंचाई की गणना करना बहुत अच्छा है:
other = obj.clone();
other.html('a<br>b').hide().appendTo('body');
size = other.height() / 2;
other.remove();
lines = obj.height() / size;यदि आप प्रत्येक अक्षर की अलग-अलग ऊंचाई के साथ एक दुर्लभ फ़ॉन्ट का उपयोग करते हैं, तो यह काम नहीं करता है। लेकिन एरियल, मोनो, कॉमिक्स, वर्दाना, आदि जैसे सभी सामान्य फोंट के साथ काम करता है।
उदाहरण:
<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>परिणाम: 6 Lines
मानकों से बाहर दुर्लभ कार्यों के बिना सभी ब्राउज़र में काम करता है।
जाँच करें: 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 का उपयोग करने वालों के लिए 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');, तो आपको उस फ़ंक्शन से एक नंबर नहीं मिलेगा।
मुझे विश्वास है कि अब यह असंभव है। हालांकि यह था।
IE7 के getClientRects के कार्यान्वयन ने ठीक वही किया जो मैं चाहता हूं। IE8 में इस पृष्ठ को खोलें , इसे अलग-अलग खिड़की की चौड़ाई को ताज़ा करने का प्रयास करें, और देखें कि पहले तत्व में लाइनों की संख्या तदनुसार कैसे बदलती है। यहाँ उस पृष्ठ से जावास्क्रिप्ट की प्रमुख पंक्तियाँ हैं:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));दुर्भाग्य से मेरे लिए, फ़ायरफ़ॉक्स हमेशा एक ग्राहक आयत प्रति तत्व देता है, और IE8 अब ऐसा ही करता है। (मार्टिन होन्नन का पेज आज काम करता है क्योंकि IE इसे IE कंप्रेशर व्यू में प्रस्तुत करता है; IE8 को F8 दबाकर अलग-अलग मोड में चलाएं।)
यह दुख की बात है। ऐसा लगता है कि एक बार फिर फ़ायरफ़ॉक्स का शाब्दिक लेकिन बेकार का कार्यान्वयन माइक्रोसॉफ्ट के उपयोगी पर जीता। या क्या मैं एक ऐसी स्थिति को याद करता हूं जहां नए getClientRects डेवलपर की मदद कर सकते हैं?
ऊपर से गयपैडडॉक के जवाब के आधार पर, यह मेरे लिए काम करता है
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);
}यहाँ ट्रिक लाइन-हाइट बढ़ाने के लिए है ताकि यह किसी भी ब्राउज़र / OS के अंतर को "निगल" ले जिस तरह से वे फोंट को प्रस्तुत करते हैं
विभिन्न शैलियों और विभिन्न फ़ॉन्ट आकारों / परिवारों के साथ इसकी जाँच की जाती है कि यह ध्यान में न रखे (क्योंकि मेरे मामले में यह मामला नहीं था), पैडिंग है - जिसे आसानी से समाधान में जोड़ा जा सकता है।
नहीं, मज़बूती से नहीं। बस कई अज्ञात चर हैं
सूची चलती जाती है। किसी दिन मुझे उम्मीद है कि जावास्क्रिप्ट के साथ मज़बूती से इसे पूरा करने की एक ऐसी विधि होगी, लेकिन जब तक यह दिन नहीं आता, तब तक आपकी किस्मत से बाहर नहीं निकलती।
मुझे इस तरह के जवाबों से नफरत है और मुझे उम्मीद है कि कोई मुझे गलत साबित कर सकता है।
आपको ('\ n') विभाजित करने में सक्षम होना चाहिए। लंबाई और लाइन ब्रेक प्राप्त करें।
अद्यतन: यह एफएफ / क्रोम पर काम करता है लेकिन आईई नहीं।
<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>getClientRectsक्लाइंट को इस तरह वापस लौटाएं और यदि आप लाइनें प्राप्त करना चाहते हैं, तो इस तरह फॉलो फ़ंक्शन का उपयोग करें
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;
}जब मैं एक html संपादक विकसित करता हूं तो मुझे पंक्ति संख्या को शांत करने का एक तरीका मिला। प्राथमिक विधि यह है कि:
IE में आप getBoundingClientRects कॉल कर सकते हैं, यह आयत के रूप में प्रत्येक पंक्ति को लौटाता है
वेबकिट या नए मानक html इंजन में, यह प्रत्येक तत्व या नोड के ग्राहक आयतों को लौटाता है, इस मामले में आप प्रत्येक आयतों की तुलना कर सकते हैं, मेरा मतलब है कि प्रत्येक का आयत सबसे बड़ा होना चाहिए, इसलिए आप उन आयतों को अनदेखा कर सकते हैं जो ऊँचाई से छोटी हैं (यदि आयत का शीर्ष इससे छोटा है और नीचे से बड़ा है, यह शर्त सही है।)
तो चलिए परीक्षा परिणाम देखते हैं:
हरे रंग की आयत प्रत्येक पंक्ति में सबसे बड़ा आयत है
लाल आयत चयन सीमा है
नीली आयत विस्तार के बाद शुरू से चयन तक की सीमा है, हम देखते हैं कि यह लाल आयत से बड़ी हो सकती है, इसलिए हमें प्रत्येक आयत के तल को जांचना होगा कि यह सीमित करने के लिए लाल आयत के तल से छोटा होना चाहिए।
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इस समाधान का प्रयास करें:
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;
}आप इसे यहाँ क्रिया में देख सकते हैं: https://jsfiddle.net/u0r6avnt/
पृष्ठ पर पैनलों का आकार बदलने का प्रयास करें (पृष्ठ के दाईं ओर को चौड़ा या छोटा करने के लिए) और फिर इसे फिर से देखने के लिए चलाएं कि यह मज़बूती से बता सकता है कि कितनी लाइनें हैं।
यह समस्या जितनी दिखती है, उससे कहीं अधिक कठिन है, लेकिन अधिकांश कठिनाई दो स्रोतों से आती है:
जावास्क्रिप्ट से सीधे रूप से उद्धृत किए जाने के लिए पाठ रेंडरिंग ब्राउज़र में बहुत निम्न-स्तरीय है। यहां तक कि CSS :: पहली पंक्ति का छद्म चयनकर्ता अन्य व्यवहारकर्ताओं की तरह काफी व्यवहार नहीं करता है (आप इसे उल्टा नहीं कर सकते हैं, उदाहरण के लिए, सभी लेकिन पहली पंक्ति को स्टाइल लागू करने के लिए )।
संदर्भ आप लाइनों की संख्या की गणना में एक बड़ा हिस्सा निभाता है। उदाहरण के लिए, यदि लाइन-ऊंचाई स्पष्ट रूप से लक्ष्य तत्व के पदानुक्रम में सेट नहीं की गई थी, तो आपको लाइन की ऊंचाई के रूप में "सामान्य" वापस मिल सकता है। इसके अलावा, तत्व का उपयोग किया जा सकता है box-sizing: border-boxऔर इसलिए पैडिंग के अधीन हो सकता है ।
मेरा दृष्टिकोण सीधे लाइन-ऊंचाई को नियंत्रित करके # 2 को कम करता है और बॉक्स साइजिंग विधि में फैक्टरिंग करता है, जिससे एक अधिक नियतात्मक परिणाम प्राप्त होता है।
कुछ मामलों में, गैर-उचित पाठ में कई पंक्तियों पर फैले लिंक की तरह, जब आप इसका उपयोग करते हैं, तो आप पंक्ति की गणना और प्रत्येक पंक्ति के प्रत्येक समन्वय को प्राप्त कर सकते हैं:
var rectCollection = object.getClientRects();https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
यह काम करता है क्योंकि प्रत्येक पंक्ति इतनी थोड़ी भी भिन्न होगी। जब तक वे हैं, उन्हें रेंडरर द्वारा एक अलग "आयत" के रूप में तैयार किया जाता है।
@ याकूबब्रिअस 2010 के सुझाव के बाद मैंने इसे jQuery के साथ बनाया। इसमें कोई शक नहीं कि इसमें सुधार किया जा सकता था लेकिन इससे कुछ मदद मिल सकती है।
$(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>आप तत्व ऊंचाई और तत्व ऊंचाई की तुलना कर सकते हैं 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
}