दिलचस्प पोस्ट
TextView या WebView में टेक्स्ट हाइलाइट करें एक निर्बाध प्रक्रिया क्या है? सरणी () और के बीच PHP अंतर जावास्क्रिप्ट में स्वरूपण संख्याओं के लिए नियमित अभिव्यक्ति नया एंड्रॉइड 4.0 आइस क्रीम सैंडविच एपीआई का उपयोग करके एंड्रॉइड कैलेंडर इवेंट कैसे पढ़ और संपादित करें? दबाए जाने वाले की तुलना में एक अलग कुंजी भेजने के लिए NSEvent को संशोधित करें कैसे डीबगिंग विकल्प -g बाइनरी निष्पादन योग्य बदलें? पैथ में फ़ायरफ़ॉक्स बाइनरी नहीं मिल सकता है सुनिश्चित करें कि फ़ायरफ़ॉक्स स्थापित है एंड्रॉइड – बैकस्पेस कैप्चर नहीं कर सकता / नरम में प्रेस हटाएं। कीबोर्ड अजगर Matplotlib आंकड़ा शीर्षक अक्ष का ओवरलैप जब जुड़वां का उपयोग करते हुए सी भाषा में अनुवाद के 8 चरणों के साथ पोस्टर यूटीएफ -8 को बीओएम से यूटीएफ -8 में परिवर्तित करें, जिसमें पायमॉन में कोई बीओएम नहीं है एनीमेशन UITableView startupdates / endupdates पर समाप्त हो गया है कि कैसे पता लगाने के लिए? JSON फ़ॉर्म डेटा को सीरियल करें सहायक उपकरणों के लिए 10.9 पर प्रोग्रामेटिक रूप से प्रवेश सक्षम करें

मैं DOM तत्व के अंदर टेक्स्ट लाइन कैसे गिना सकता हूं? क्या मैं?

मैं सोच रहा हूं कि उदाहरण के लिए एक div के अंदर लाइनों को गिनने का कोई तरीका है। कहते हैं कि हमारे पास एक ऐसा div है:

<div id="content">hello how are you?</div> 

कई कारकों पर निर्भर करते हुए, div में एक या दो या पाठ की चार पंक्तियां हो सकती हैं क्या स्क्रिप्ट के बारे में जानने के लिए कोई रास्ता है?

दूसरे शब्दों में, क्या DOM में स्वत: ब्रेक का प्रतिनिधित्व किया जा सकता है?

Solutions Collecting From Web of "मैं DOM तत्व के अंदर टेक्स्ट लाइन कैसे गिना सकता हूं? क्या मैं?"

यदि डिवीज़ का आकार सामग्री पर निर्भर होता है (जो मैं आपके विवरण से मानता हूं) तो आप 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 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> 

एक समाधान स्क्रिप्ट के उपयोग से एक स्पैन टैग में प्रत्येक शब्द संलग्न करना है। तो अगर किसी दिए गए स्पैन टैग के Y आयाम उसके तत्काल पूर्ववर्ती के मुकाबले कम है तो एक लाइन ब्रेक हुई है।

जो लोग 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); } 

मैं यहाँ और अन्य सवालों पर जवाब से संतुष्ट नहीं था। उच्चतर मूल्यांकन किए गए उत्तर padding या border को खाते में नहीं लेते हैं, और इसलिए स्पष्ट रूप से box-sizing को भी अनदेखा करते हैं। मेरे उत्तर में कुछ तकनीकों को और यहाँ और अन्य धागे पर एक समाधान मिला है जो मेरी संतुष्टि के लिए काम करता है।

यह सही नहीं है: जब कोई संख्यात्मक मान line-height (उदाहरण के लिए normal या inherit ) के लिए पुनर्प्राप्त नहीं किया जा सकता है, तो यह केवल 1.2 द्वारा गुणा करके font-size का उपयोग करता है। शायद किसी और व्यक्ति को उन मामलों में पिक्सेल मूल्य का पता लगाने का विश्वसनीय तरीका सुझाया जा सकता है।

इसके अलावा, यह ज्यादातर शैलियों और मामलों को मैंने सही तरीके से संभालने में सफल रहा है।

चारों ओर खेलने और परीक्षण करने के लिए 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> 

मुझे विश्वास है कि यह अब असंभव है यह, यद्यपि था।

आईई 7 के 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 कॉम्पेट दृश्य में रेडर करता है; विभिन्न तरीकों के साथ खेलने के लिए IE8 में F12 दबाएं।)

यह दुख की बात है। ऐसा लग रहा है कि फ़ायरफ़ॉक्स का माइक्रोसॉफ्ट के उपयोगी एक पर जीती हुई कल्पना का फ़ायरफ़ॉक्स का शाब्दिक लेकिन बेकार कार्यान्वयन एक बार फिर दिखता है। या फिर मुझे ऐसी स्थिति याद आती है जहां नया getClientRects डेवलपर की मदद कर सकता है?

फ़ंक्शन getClientRects () को देखें जो एक तत्व में पंक्तियों की संख्या की गणना करने के लिए उपयोग किए जा सकते हैं। यहां इसका उपयोग करने का एक उदाहरण दिया गया है।

 var message_lines = $("#message_container")[0].getClientRects(); 

यह एक जावास्क्रिप्ट DOM वस्तु देता है यह करने से लाइनों की मात्रा जानी जा सकती है:

 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> 

हालांकि मैं इस तरह की शैली को कूटबद्ध करने की सिफारिश नहीं करता। यह सिर्फ उदाहरण के उद्देश्यों के लिए है

कंटेनर वस्तु को क्लोन करें और 2 अक्षरों को लिखें और ऊंचाई की गणना करें। यह सभी शैली लागू, रेखा ऊंचाई, आदि के साथ वास्तविक ऊंचाई वापस आती है। अब, ऊँचाई ऑब्जेक्ट / एक पत्र के आकार की गणना करें। जेक्जरी में, ऊँचाई पैडिंग, मार्जिन और सीमा को ऊंचा करती है, प्रत्येक पंक्ति की वास्तविक ऊंचाई की गणना करना बहुत अच्छा है:

 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/

नहीं, मज़बूती से नहीं बस बहुत अधिक अज्ञात चर हैं

  1. क्या ओएस (विभिन्न डीपीआई, फ़ॉन्ट विविधता, आदि …)?
  2. क्या उनके पास उनके फ़ॉन्ट आकार का आकार बढ़ा है क्योंकि वे वास्तव में अंधा हैं?
  3. हेक, वेबकिट ब्राउज़र में, आप वास्तव में टेक्स्ट बॉक्स को अपने दिल की इच्छा में बदल सकते हैं

सूची चलती जाती है। किसी दिन मैं आशा करता हूं कि इस तरह जावास्क्रिप्ट के साथ मज़बूती से पूरा करने का एक तरीका होगा, लेकिन उस दिन तक, भाग्य से बाहर निकलते हैं।

मैं इन प्रकार के उत्तरों से नफरत करता हूं और मुझे आशा है कि कोई मुझे गलत साबित कर सकता है।

ऊपर से GuyPaddock के जवाब पर आधारित, यह मेरे लिए काम करने लगता है

 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); } 

यहां की चाल लाइन-ऊँचाई को बढ़ाने के लिए है ताकि वे किसी भी ब्राउज़र / ओएस अंतर को "निगल" कर सकें जिस तरह से वे फोंट प्रस्तुत करते हैं

इसे विभिन्न स्टाइलिंग और भिन्न फ़ॉन्ट आकार / परिवारों के साथ ही चेक किया गया था, जो कि यह ध्यान में नहीं लेता है (मेरे मामले में यह मामला नहीं था), पैडिंग है – जो आसानी से समाधान में जोड़ा जा सकता है

आपको विभाजित करने में सक्षम होना चाहिए ('\ 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> 

getClientRects इस तरह क्लाइंट 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 संपादक विकसित करता हूं, तो मुझे लाइन नंबर को कैल करने का एक तरीका मिला। प्राथमिक विधि यह है कि:

  1. आईई में आप getBoundingClientRects पर कॉल कर सकते हैं, यह प्रत्येक पंक्ति को एक आयताकार के रूप में देता है

  2. वेबकिट या नए मानक एचटीएमएल इंजन में, यह प्रत्येक एलीमेंट या नोड के क्लाइंट आयत को रिटर्न करता है, इस मामले में आप प्रत्येक आयत की तुलना कर सकते हैं, मेरा मतलब है कि एक आयताकार होना सबसे बड़ा है, इसलिए आप उन आयतों को अनदेखा कर सकते हैं कि ऊंचाई छोटा है (यदि एक आयताकार की तुलना में उसके ऊपर छोटे और नीचे से बड़ा है, तो स्थिति सही है।)

तो चलिए परीक्षण के परिणाम देखें:

यहां छवि विवरण दर्ज करें

हरे रंग का आयत प्रत्येक पंक्ति में सबसे बड़ा आयताकार है

लाल आयत चयन सीमा है

नीले आयत को सीमा से शुरू करने के बाद चयन के लिए सीमा होती है, हम देखते हैं कि यह लाल आयत से बड़ा हो सकता है, इसलिए हमें प्रत्येक आयत के नीचे की सीमा को जांचना होगा, यह लाल आयत के नीचे से छोटा होना चाहिए।

  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 

@BobBrunius 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> 

इस समाधान का प्रयास करें:

 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/

पृष्ठ पर पैनलों को रीसाइज करने की कोशिश करें (पृष्ठ के दाईं ओर व्यापक या छोटा बनाने के लिए) और फिर इसे फिर से चलाने के लिए यह देखने के लिए कि यह भरोसेमंद बता सकता है कि कितने पंक्तियां हैं।

यह समस्या यह दिखने से कठिन है, लेकिन अधिकतर कठिनाई दो स्रोतों से होती है:

  1. जावास्क्रिप्ट से सीधे पूछताछ करने के लिए ब्राउज़र में टेक्स्ट रेंडरिंग बहुत निम्न स्तर है यहां तक ​​कि सीएसएस :: प्रथम-रेखा छद्म चयनकर्ता अन्य चयनकर्ताओं की तरह व्यवहार नहीं करता है (आप इसे उलटा नहीं कर सकते हैं, उदाहरण के लिए, सभी को स्टाइल करने पर पहली पंक्ति)।

  2. संदर्भ में आप लाइनों की संख्या की गणना में एक बड़ा हिस्सा खेलता है। उदाहरण के लिए, यदि रेखा-ऊंचाई लक्ष्य तत्व के पदानुक्रम में स्पष्ट रूप से सेट नहीं हुई थी, तो आपको रेखा की ऊँचाई के रूप में "सामान्य" वापस मिल सकता है इसके अलावा, तत्व box-sizing: border-box का उपयोग कर रहे हैं box-sizing: border-box और इसलिए पैडिंग के अधीन हो सकता है

मेरा दृष्टिकोण लाइन-ऊंचाई पर सीधे नियंत्रण और बॉक्स आकार बदलने विधि में फैक्टरिंग को कम करके # 2 को कम करता है, जिससे अधिक नियतात्मक परिणाम प्राप्त होता है।

आप ऊँचाई ऊंचाई और तत्व ऊँचाई ऊंचाई line-height: 0 तुलना कर सकते हैं 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 }