दिलचस्प पोस्ट
रु .. रूबी में ब्लॉक के लिए do..end बनाम घुंघराले ब्रेसिज़ स्टिकी ब्रॉडकास्ट क्या है? PHP की तरह जावास्क्रिप्ट में साल का सप्ताह मिलता है जावा में वर्ण-शब्द के कई अक्षरों के बाद स्ट्रिंग को लपेटें प्रोटोटाइप के तरीकों को असाइन करना * अंदर * कन्स्ट्रक्टर फ़ंक्शन – क्यों नहीं? मैं मेवेन के साथ अंतिम जार फाइल के अंदर पुस्तकालय फ़ोल्डर में सभी जरूरी जार फाइल कैसे डालूं? स्ट्रिंग से होस्टनाम नाम निकालें LibXtst.so.6 नहीं मिला / स्थापित कर सकते हैं? एनआईटी प्रौद्योगिकियों का प्रयोग करके स्क्रीन के वीडियो रिकॉर्ड करें विंडोज में Google कोड से प्रोजेक्ट कैसे डाउनलोड / चेकआउट करें? कई उदाहरणों के लिए jQuery की तारीख पिकर लागू करें क्या जावा सरणियों का अधिकतम आकार है? अंतर (फ़ंक्शन () {}) (); और फ़ंक्शन () {} (); Z80 एएसएम BNF संरचना … क्या मैं सही रास्ते पर हूं? RelativeLayout wrap_content के लिए पूर्ण स्क्रीन ले रहा है

जावास्क्रिप्ट के साथ टेक्स्ट चौड़ाई की गणना करें

मैं स्ट्रिंग की चौड़ाई की गणना करने के लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं। क्या मोनोस्पेस टाइपफेस का उपयोग किए बिना यह संभव है?

यदि यह अंतर्निहित नहीं है, तो मेरा एकमात्र विचार प्रत्येक चरित्र के लिए चौड़ाई की एक तालिका बनाना है, लेकिन यह विशेष रूप से यूनिकोड और विभिन्न प्रकार के आकारों (और उस बात के लिए सभी ब्राउज़र्स) का समर्थन करने के लिए बहुत अनुचित है।

वेब के समाधान से एकत्रित समाधान "जावास्क्रिप्ट के साथ टेक्स्ट चौड़ाई की गणना करें"

निम्न शैलियों के साथ एक DIV स्टाइल बनाएं। अपने जावास्क्रिप्ट में, फ़ॉन्ट आकार और विशेषताओं को निर्धारित करें जो आप मापने का प्रयास कर रहे हैं, अपनी स्ट्रिंग को DIV में रखें, फिर डीआईवी की वर्तमान चौड़ाई और ऊंचाई पढ़ें। यह सामग्री को फिट करने के लिए खिंचाव करेगा और आकार स्ट्रिंग के आकार के आकार के कुछ पिक्सल के भीतर होगा।

HTML:

<div id="Test"> abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ </div> 

सीएसएस:

 #Test { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; /* Thanks to Herb Caudill comment */ } 

जावास्क्रिप्ट (टुकड़ा):

 var test = document.getElementById("Test"); test.style.fontSize = fontSize; var height = (test.clientHeight + 1) + "px"; var width = (test.clientWidth + 1) + "px"; 

एचटीएमएल 5 में , आप केवल कैनवास.माइमर टेक्स्ट मेथड (अधिक स्पष्टीकरण यहाँ ) का उपयोग कर सकते हैं।

इस बेला की कोशिश करो :

 /** * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. * * @param {String} text The text to be rendered. * @param {String} font The css font descriptor that text is to be rendered with (eg "bold 14px verdana"). * * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 */ function getTextWidth(text, font) { // re-use canvas object for better performance var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); context.font = font; var metrics = context.measureText(text); return metrics.width; } console.log(getTextWidth("hello there!", "bold 12pt arial")); // close to 86 

यह बेला बॉब मोंटेवेर्ड्स की डोम-आधारित पद्धति के भिन्नता के लिए इस कैनवस विधि की तुलना करता है, ताकि आप परिणामों की सटीकता का विश्लेषण और इसकी तुलना कर सकें।

इस दृष्टिकोण के कई फायदे हैं, जिनमें शामिल हैं:

  • दूसरे (डोम-आधारित) तरीकों से अधिक संक्षिप्त और सुरक्षित क्योंकि यह ग्लोबल स्टेट नहीं बदलता है, जैसे कि आपके DOM
  • अधिक कैनवास पाठ गुणों को संशोधित करके और अनुकूलन संभव है, जैसे textAlign और textBaseline

नोट: जब आप अपने DOM को टेक्स्ट जोड़ते हैं, तो पैडिंग, मार्जिन और सीमा के खाते को भी याद रखना याद रखें।

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

इस jsperf (टिप्पणियों में योगदानकर्ताओं के लिए धन्यवाद), कैनवास पद्धति और DOM- आधारित विधि समान रूप से तेज़ हैं, यदि कैशिंग को DOM- आधारित पद्धति में जोड़ दिया गया है और आप फ़ायरफ़ॉक्स का उपयोग नहीं कर रहे हैं फ़ायरफ़ॉक्स में, किसी कारण से, यह कैनवास पद्धति DOM- आधारित पद्धति से बहुत तेज है (सितंबर 2014 तक)।

यहाँ एक उदाहरण के बिना मैं एक साथ मार पड़ी है। ऐसा लगता है कि हम सभी एक ही पृष्ठ पर हैं।

 String.prototype.width = function(font) { var f = font || '12px arial', o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; } 

इसका उपयोग करना सरल है: "a string".width()

** जोड़ा गया white-space: nowrap इतना चौड़ाई वाली चौड़ाई के साथ स्ट्रिंग की गणना की जा सकती है।

jQuery:

 (function($) { $.textMetrics = function(el) { var h = 0, w = 0; var div = document.createElement('div'); document.body.appendChild(div); $(div).css({ position: 'absolute', left: -1000, top: -1000, display: 'none' }); $(div).html($(el).html()); var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing']; $(styles).each(function() { var s = this.toString(); $(div).css(s, $(el).css(s)); }); h = $(div).outerHeight(); w = $(div).outerWidth(); $(div).remove(); var ret = { height: h, width: w }; return ret; } })(jQuery); 

यह मेरे लिए काम करता है …

 // Handy JavaScript to meature the size taken to render the supplied text; // you can supply additional style information too if you have it. function measureText(pText, pFontSize, pStyle) { var lDiv = document.createElement('div'); document.body.appendChild(lDiv); if (pStyle != null) { lDiv.style = pStyle; } lDiv.style.fontSize = "" + pFontSize + "px"; lDiv.style.position = "absolute"; lDiv.style.left = -1000; lDiv.style.top = -1000; lDiv.innerHTML = pText; var lResult = { width: lDiv.clientWidth, height: lDiv.clientHeight }; document.body.removeChild(lDiv); lDiv = null; return lResult; } 

एक्स्टजेएस जावास्क्रिप्ट लाइब्रेरी में एक महान वर्ग है, जिसे Ext.util.TextMetrics कहा जाता है "पाठ के ब्लॉक के लिए सटीक पिक्सेल माप प्रदान करता है ताकि आप निर्धारित कर सकें कि पिक्सल में, टेक्स्ट के दिए गए ब्लॉक कितने उच्च और विस्तृत होंगे"। आप या तो इसका सीधे उपयोग कर सकते हैं या देखने के लिए अपने स्रोत को कोड में देख सकते हैं कि यह कैसे किया जाता है।

http://extjs.com/deploy/dev/docs/?class=Ext.util.TextMetrics

मैंने इसके लिए थोड़ा उपकरण लिखा था शायद यह किसी के लिए उपयोगी है यह jQuery के बिना काम करता है

https://github.com/schickling/calculate-size

उपयोग:

 var size = calculateSize("Hello world!", { font: 'Arial', fontSize: '12px' }); console.log(size.width); // 65 console.log(size.height); // 14 

बेलाल: http://jsfiddle.net/PEvL8/

आप कैनवास का उपयोग कर सकते हैं ताकि आपको सीएसएस के गुणों के साथ इतना अधिक सौदा न करना पड़े:

 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "20pt Arial"; // This can be set programmaticly from the element's font-style if desired var textWidth = ctx.measureText($("#myElement").text()).width; 
 <span id="text">Text</span> <script> var textWidth = document.getElementById("text").offsetWidth; </script> 

यह तब तक काम करना चाहिए जब तक <span> टैग पर इसके लिए कोई अन्य शैली लागू नहीं होती है ऑफ़सेटविड्थ में किसी भी सीमाओं, क्षैतिज पैडिंग, ऊर्ध्वाधर स्क्रॉलबार चौड़ाई, आदि की चौड़ाई शामिल होगी।

नीचे दिए गए कोड-स्नैप, स्पैन-टैग की चौड़ाई "गणना" करें, इसके लिए "…" जोड़ता है, यदि इसकी बहुत लंबी है और टेक्स्ट-लम्बाई कम कर देता है, जब तक कि उसके माता-पिता में फिट बैठे न हो एक हजार गुणा)

सीएसएस

 div.places { width : 100px; } div.places span { white-space:nowrap; overflow:hidden; } 

एचटीएमएल

 <div class="places"> <span>This is my house</span> </div> <div class="places"> <span>And my house are your house</span> </div> <div class="places"> <span>This placename is most certainly too wide to fit</span> </div> 

जावास्क्रिप्ट (jQuery के साथ)

 // loops elements classed "places" and checks if their child "span" is too long to fit $(".places").each(function (index, item) { var obj = $(item).find("span"); if (obj.length) { var placename = $(obj).text(); if ($(obj).width() > $(item).width() && placename.trim().length > 0) { var limit = 0; do { limit++; placename = placename.substring(0, placename.length - 1); $(obj).text(placename + "..."); } while ($(obj).width() > $(item).width() && limit < 1000) } } }); 

इस कोड को आज़माएं:

 function GetTextRectToPixels(obj) { var tmpRect = obj.getBoundingClientRect(); obj.style.width = "auto"; obj.style.height = "auto"; var Ret = obj.getBoundingClientRect(); obj.style.width = (tmpRect.right - tmpRect.left).toString() + "px"; obj.style.height = (tmpRect.bottom - tmpRect.top).toString() + "px"; return Ret; } 

clientWidth की चौड़ाई और clientWidth साथ प्राप्त किया जा सकता है clientWidth और clientWidth

 var element = document.getElementById ("mytext"); var width = element.clientWidth; var height = element.clientHeight; 

सुनिश्चित करें कि शैली की स्थिति गुण पूर्ण पर सेट है

 element.style.position = "absolute"; 

एक div अंदर होने की आवश्यकता नहीं, एक p या एक span अंदर हो सकता है

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

 function textWidth(text, fontProp) { var tag = document.createElement("div"); tag.style.position = "absolute"; tag.style.left = "-999em"; tag.style.whiteSpace = "nowrap"; tag.style.font = fontProp; tag.innerHTML = text; document.body.appendChild(tag); var result = tag.clientWidth; document.body.removeChild(tag); return result; } 

उपयोग:

 if ( textWidth("Text", "bold 13px Verdana") > elementWidth) { ... } 

उदाहरण के काम की बेला: http://jsfiddle.net/tdpLdqpo/1/

HTML:

 <h1 id="test1"> How wide is this text? </h1> <div id="result1"></div> <hr/> <p id="test2"> How wide is this text? </p> <div id="result2"></div> <hr/> <p id="test3"> How wide is this text?<br/><br/> f sdfj f sdlfj lfj lsdk jflsjd fljsd flj sflj sldfj lsdfjlsdjkf sfjoifoewj flsdjfl jofjlgjdlsfjsdofjisdojfsdmfnnfoisjfoi ojfo dsjfo jdsofjsodnfo sjfoj ifjjfoewj fofew jfos fojo foew jofj sfj </p> <div id="result3"></div> 

जावास्क्रिप्ट कोड:

 function getTextWidth(text, font) { var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); context.font = font; var metrics = context.measureText(text); return metrics.width; }; $("#result1") .text("answer: " + getTextWidth( $("#test1").text(), $("#test1").css("font")) + " px"); $("#result2") .text("answer: " + getTextWidth( $("#test2").text(), $("#test2").css("font")) + " px"); $("#result3") .text("answer: " + getTextWidth( $("#test3").text(), $("#test3").css("font")) + " px"); 

दीपक नादार के जवाब का निर्माण करना, मैंने पाठ और फ़ॉन्ट शैलियों को स्वीकार करने के लिए फ़ंक्शंस पैरामीटर बदल दिया। आपको किसी तत्व को संदर्भित करने की आवश्यकता नहीं है इसके अलावा, fontOptions डिफ़ॉल्ट हैं, इसलिए आपको उन सभी को आपूर्ति करने की आवश्यकता नहीं है।

 (function($) { $.format = function(format) { return (function(format, args) { return format.replace(/{(\d+)}/g, function(val, pos) { return typeof args[pos] !== 'undefined' ? args[pos] : val; }); }(format, [].slice.call(arguments, 1))); }; $.measureText = function(html, fontOptions) { fontOptions = $.extend({ fontSize: '1em', fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'arial' }, fontOptions); var $el = $('<div>', { html: html, css: { position: 'absolute', left: -1000, top: -1000, display: 'none' } }).appendTo('body'); $(fontOptions).each(function(index, option) { $el.css(option, fontOptions[option]); }); var h = $el.outerHeight(), w = $el.outerWidth(); $el.remove(); return { height: h, width: w }; }; }(jQuery)); var dimensions = $.measureText("Hello World!", { fontWeight: 'bold', fontFamily: 'arial' }); // Font Dimensions: 94px x 18px $('body').append('<p>').text($.format('Font Dimensions: {0}px x {1}px', dimensions.width, dimensions.height)); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

मुझे लगता है कि यह डेपक प्रविष्टि के समान है, लेकिन लुई लुजरी के काम पर आधारित है, जो छापे के पृष्ठ पर एक लेख में प्रकाशित हुआ है।

 (function($){ $.fn.autofit = function() { var hiddenDiv = $(document.createElement('div')), content = null; hiddenDiv.css('display','none'); $('body').append(hiddenDiv); $(this).bind('fit keyup keydown blur update focus',function () { content = $(this).val(); content = content.replace(/\n/g, '<br>'); hiddenDiv.html(content); $(this).css('width', hiddenDiv.width()); }); return this; }; })(jQuery); 

समारोह के नियंत्रण के लिए asociated है के बाद ठीक घटना समारोह में कॉल कार्यान्वित करने के लिए प्रयोग किया जाता है।

उदाहरण: $ ('इनपुट')। autofit ()। ट्रिगर ("फिट");

JQuery के बिना:

 String.prototype.width = function (fontSize) { var el, f = fontSize + " px arial" || '12px arial'; el = document.createElement('div'); el.style.position = 'absolute'; el.style.float = "left"; el.style.whiteSpace = 'nowrap'; el.style.visibility = 'hidden'; el.style.font = f; el.innerHTML = this; el = document.body.appendChild(el); w = el.offsetWidth; el.parentNode.removeChild(el); return w; } // Usage "MyString".width(12); 
 var textWidth = (function (el) { el.style.position = 'absolute'; el.style.top = '-1000px'; document.body.appendChild(el); return function (text) { el.innerHTML = text; return el.clientWidth; }; })(document.createElement('div'));