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

Question

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

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

Comments

सावधान रहें कि यदि आप बाहरी फोंट का उपयोग कर रहे हैं, तो आपको लोड होने के बाद नीचे की तकनीकों का उपयोग करना होगा। आपको यह एहसास नहीं हो सकता है कि आपने उन्हें कैश किया है या यदि आपके पास स्थानीय संस्करण स्थापित हैं।

— सेठ डब्ल्यू। क्लेन

Answer 1

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

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

console.log(height, width);

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

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

Comments

केवल एक चीज मैं जोड़ूंगा कि यह गलत आयाम दे सकता है जिसके आधार पर शैलियों का उपयोग किया जाता है। याद रखें कि आपके पास पी {पत्र-रिक्ति: 0.1em जैसी शैलियों हो सकती हैं; } कि एक DIV तत्व प्रतिबिंबित नहीं होगा। आपको यह सुनिश्चित करना चाहिए कि जहाँ आप पाठ का उपयोग करेंगे, उसके लिए स्थान उपयुक्त हैं।

— जिम

डिट्टो जिम की टिप्पणी - यह सुनिश्चित करने के लिए डबल-चेक करें कि कंटेनर, डिव इस मामले में, सीएसएस चयन नियमों के माध्यम से उस पर लागू कोई अन्य शैली नहीं है कि आप उस समय के संज्ञान नहीं हो सकते हैं। मापने से पहले जिन लोगों की आप देखभाल करते हैं उन्हें लागू करने से पहले कंटेनर से सभी प्रासंगिक शैलियों को पट्टी करें।

— जेसन बंटिंग

आपको सफ़ेद-स्थान में भी रखना चाहिए: यदि आपको लगता है कि पाठ ब्राउज़र की चौड़ाई को पार कर जाएगा।

— हर्ब कॉडिल

@ सब है कि चारों ओर हैकिंग है, इसलिए मैं एक अलग, कम hacky, नीचे दृष्टिकोण का सुझाव है। इसे यहां देख लें ।

— डोमी

बस जिज्ञासु +1प्रत्येक आयाम पर क्या है?

— किप

Answer 2

में एचटीएमएल 5 , तुम बस का उपयोग कर सकते Canvas.measureText विधि (अधिक विवरण यहाँ )।

इस फील को आजमाएं :

/**
 * 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 (e.g. "bold 14px verdana").
 * 
 * @see /programming/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- आधारित) विधियों की तुलना में अधिक संक्षिप्त और सुरक्षित क्योंकि यह वैश्विक स्थिति को नहीं बदलता है, जैसे कि आपका DOM।
• अधिक कैनवास पाठ गुणों को संशोधित करके आगे अनुकूलन संभव है , जैसे textAlignऔरtextBaseline ।

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

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

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

Comments

यह एक भयानक विकल्प है, मुझे इसके बारे में पता नहीं था। कभी डोम में मापने के प्रदर्शन के लिए इस के प्रदर्शन की तुलना करें?

— सिंपलजी

मैंने उस jsperf बेंचमार्क में कैशिंग जोड़ा। अब दो विधियाँ बराबर हैं: jsperf.com/measure-text-width/4

— ब्रैंडन ब्लूम

@ मर्तान हुह? "कई HTML तत्वों" का यहां किसी भी चीज़ से क्या संबंध है? इस उदाहरण में कैनवास ऑब्जेक्ट डोम से जुड़ा नहीं है। और उस तरफ से भी, एक कैनवास ड्राइंग संदर्भ में फ़ॉन्ट को बदलने से भी कैनवास को आप तक strokeText()या तो प्रभावित नहीं करता है या fillText()। शायद आप एक अलग जवाब पर टिप्पणी करना चाहते थे?

— Ajedi32

अच्छा समाधान। मैंने डोमी के उत्तर के इर्द-गिर्द कुछ अन्य तरीकों को लपेटा है ताकि मैं कर सकूं - एक (संभावित रूप से) दीर्घवृत्त स्ट्रिंग को दीर्घवृत्त (...) के साथ अंत में प्राप्त करें यदि यह किसी दिए गए स्थान में फिट नहीं होगा (स्ट्रिंग के रूप में ज्यादा जितना संभव हो उपयोग किया जाएगा) - एक JQuery तत्व में पास करें जिसमें (संभवतः छंटनी की गई) स्ट्रिंग शामिल है, और फ़ॉन्ट विशेषताओं को गतिशील रूप से निर्धारित करें ताकि उन्हें कठोर-कोडित न होना पड़े, जिससे सीएसएस फ़ॉन्ट विशेषताएँ बिना टूटे बदल सकें। अभिन्यास। JSFiddle यहां: jsfiddle.net/brebey/1q94gLsu/6/embed

— BRebey

अच्छा है क्योंकि उपयोगकर्ता इसे नहीं देखता है!

— क्लब 4545

Answer 3

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

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div></div>')
            .text(this)
            .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ताकि खिड़की की चौड़ाई से बड़ी चौड़ाई के साथ तार की गणना की जा सके।

Comments

धन्यवाद जॉर्डन सी। एक बात मैं जोड़ूंगा, यदि आप इसे एक ही पृष्ठ पर कई बार कॉल कर रहे हैं, और प्रदर्शन एक समस्या है, तो आप DIV को जारी रख सकते हैं, और बस सामग्री को बदल सकते हैं और चौड़ाई की जांच कर सकते हैं। मैंने बस इस तरह से किया था ताकि एक बार सब कुछ कहा और किया जाए, जब आप शुरू करते हैं तो DOM वैसा ही होगा

— Bob Monteverde

मैं इस विधि को Stringनहीं जोड़ूंगा क्योंकि यह आपके प्रोग्राम की चिंताओं को अलग करने (अलग कोर कोड बनाम UI कोड) को कम कर देता है। कल्पना कीजिए कि आप अपने कोर कोड को एक बहुत ही अलग यूआई फ्रेमवर्क के साथ एक प्लेटफॉर्म पर पोर्ट करना चाहते हैं ...

— डोमी

यह खराब डिज़ाइन है , यह न केवल आपके मॉडल को आपके विचार से जोड़े बल्कि सीधे jQuery के साथ भी जोड़े। उस के शीर्ष पर, यह reflow नरक है, यह निश्चित रूप से अच्छी तरह से पैमाने पर नहीं होगा।

— जेम्स

यदि आप फ्लोट मूल्य चाहते हैं, तो आप o[0].getBoundingClientRect().widthयहाँ सुझाए अनुसार उपयोग कर सकते हैं : stackoverflow.com/a/16072668/936397

— अलेक्जेंडर ओल्सन

@ वायरस ने अच्छी तरह से कहा कि 100+ लोग शायद प्रदर्शन के बारे में परवाह नहीं करते हैं ... फिर भी, जो मैंने कहा है वह कम या वैध नहीं है।

— जेम्स

Answer 4

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

Answer 5

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

// Handy JavaScript to measure 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;
}

Comments

नमस्ते आपका जवाब वास्तव में उपयोगी है, लेकिन इसके बजाय .css का उपयोग करें .स्टाइल के बजाय IE 8 और निम्न का समर्थन करने के लिए ..

— दिलीप राजकुमार

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

— बोबट्रोपो

Answer 6

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

http://docs.sencha.com/extjs/6.5.3/modern/Ext.util.TextMetrics.html

Comments

ExtJS के पास एक विषम लाइसेंस है। या तो आप वर्तमान अनुरक्षकों, Sencha कंपनी को इसका उपयोग करने के लिए भुगतान करते हैं, या आपको अपने आवेदन में सभी संबंधित कोड को खोलना होगा। यह ज्यादातर कंपनियों के लिए शो स्टॉपर है। दूसरी ओर jQuery, अत्यधिक अनुमत एमआईटी लाइसेंस का उपयोग करता है।

— देवदंके

क्या जावास्क्रिप्ट स्वचालित रूप से खुले स्रोत की आवश्यकताओं को पूरा नहीं करता है? आप पृष्ठ देखने वाले किसी भी व्यक्ति को स्रोत की सेवा देते हैं।

— पैट्रिकओ

स्रोत कोड और खुले स्रोत को देखने में सक्षम होने के बीच एक अंतर है, जिसे लाइसेंसिंग द्वारा परिभाषित किया गया है।

— पार्कर आउल

हम में से अभी भी उन लोगों से धन्यवाद एक्सटीजेएस का उपयोग करते हुए :-)

— मोनार्क वाडिया

आपको

— एक्सटीजेएस

Answer 7

मुझे आपका "केवल विचार" सिर्फ एक स्थैतिक चरित्र चौड़ाई मानचित्र करने जैसा है! यह वास्तव में मेरे उद्देश्यों के लिए अच्छा काम करता है। कभी-कभी, प्रदर्शन कारणों के लिए या क्योंकि आपके पास DOM तक आसान पहुँच नहीं है, आप बस एक त्वरित हैकी स्टैंडअलोन कैलकुलेटर को एक ही फ़ॉन्ट पर कैलिब्रेट कर सकते हैं। तो यहाँ एक Helvetica को कैलिब्रेट किया गया है; एक स्ट्रिंग पास करें और (वैकल्पिक रूप से) एक फ़ॉन्ट आकार:

function measureText(str, fontSize = 10) {
  const widths = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2796875,0.2765625,0.3546875,0.5546875,0.5546875,0.8890625,0.665625,0.190625,0.3328125,0.3328125,0.3890625,0.5828125,0.2765625,0.3328125,0.2765625,0.3015625,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.2765625,0.2765625,0.584375,0.5828125,0.584375,0.5546875,1.0140625,0.665625,0.665625,0.721875,0.721875,0.665625,0.609375,0.7765625,0.721875,0.2765625,0.5,0.665625,0.5546875,0.8328125,0.721875,0.7765625,0.665625,0.7765625,0.721875,0.665625,0.609375,0.721875,0.665625,0.94375,0.665625,0.665625,0.609375,0.2765625,0.3546875,0.2765625,0.4765625,0.5546875,0.3328125,0.5546875,0.5546875,0.5,0.5546875,0.5546875,0.2765625,0.5546875,0.5546875,0.221875,0.240625,0.5,0.221875,0.8328125,0.5546875,0.5546875,0.5546875,0.5546875,0.3328125,0.5,0.2765625,0.5546875,0.5,0.721875,0.5,0.5,0.5,0.3546875,0.259375,0.353125,0.5890625]
  const avg = 0.5279276315789471
  return str
    .split('')
    .map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg)
    .reduce((cur, acc) => acc + cur) * fontSize
}

यह विशालकाय बदसूरत सरणी वर्ण कोड द्वारा अनुक्रमित ASCII वर्ण चौड़ाई है। तो यह सिर्फ ASCII का समर्थन करता है (अन्यथा यह औसत चरित्र चौड़ाई मानता है)। सौभाग्य से, चौड़ाई मूल रूप से फ़ॉन्ट आकार के साथ रैखिक रूप से होती है, इसलिए यह किसी भी फ़ॉन्ट आकार में बहुत अच्छी तरह से काम करता है। यह कहीं भी kernering या ligatures या जो भी के बारे में जागरूकता का अभाव है।

"कैलिब्रेट" करने के लिए मैंने हर चरित्र को एक svg पर charCode 126 (शक्तिशाली टिल्ड) तक प्रदान किया और बाउंडिंग बॉक्स प्राप्त किया और इसे इस सरणी में सहेजा; अधिक कोड और स्पष्टीकरण और डेमो यहाँ ।

Comments

यह एक स्मार्ट समाधान है, अच्छा एक :) मैं हमेशा एक ही फ़ॉन्ट / आकार का उपयोग कर रहा हूं, इसलिए यह मुझे अच्छी तरह से सूट करता है। मुझे डोम / कैनवास के समाधान का प्रदर्शन एक वास्तविक समस्या के रूप में मिला, यह वास्तव में साफ है, चीयर्स!

— mikeapr4 15

कैनवास की आवश्यकता को दूर करता है +1

— frage

आप छुटकारा पा सकते हैं * fontSizeऔर सिर्फ 'एम' का उपयोग कर सकते हैं

— मैट फ्लेचर

क्या कमाल का जवाब है!

— almosnow

Answer 8

मैंने उसके लिए थोड़ा टूल लिखा। शायद यह किसी के लिए उपयोगी है। यह 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/

Answer 9

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

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;

Comments

DOM तत्व बनाने और इसके लिए css प्रॉपर्टीज़ निर्दिष्ट करने की तुलना में बहुत अधिक हैवीवेट (2d संदर्भ प्राप्त करने के साथ) नहीं है?

— फिरौन 2k

यदि आप पहले से ही किसी चीज़ के लिए कैनवास का उपयोग कर रहे हैं तो यह एक साफ तरीका है। लेकिन बहुत कम है। मापक कॉल अकेले 8-10 एमएस (क्रोम का उपयोग करके) लेता है।

— रुई मार्केस

Answer 10

<span id="text">Text</span>

<script>
var textWidth = document.getElementById("text").offsetWidth;
</script>

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

Comments

वह कमोबेश वही है जो ऊपरी समाधान करते हैं, लेकिन जैसा कि आपके पाठ को कई पंक्तियों में विभाजित किया जा सकता है, वे वास्तविक पूर्ण पाठ चौड़ाई प्राप्त करने के लिए पाठ में कुछ सीएसएस शैलियों को जोड़ते हैं।

— एड्रियन मैयर

Answer 11

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

सीएसएस

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

Comments

एक समय में 1 वर्ण को लूप करने के बजाय एक द्विआधारी खोज का प्रयास करें: एलेक्स के जवाब पर मेरी टिप्पणी देखें stackoverflow.com/questions/536814/…

— स्टेनली

@StanleyH: अच्छा विचार है - मैं आपके सुझाव को जल्द से जल्द लागू करूंगा।

— Techek

Answer 12

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

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) {
    ...
}

Answer 13

मामले में किसी और यहाँ मिल गया एक तरह से एक स्ट्रिंग की चौड़ाई को मापने के लिए के लिए दोनों की तलाश में और सबसे बड़ा फ़ॉन्ट आकार है कि एक विशेष चौड़ाई में फिट होगा क्या पता करने के लिए एक तरह से, यहाँ एक समारोह एक द्विआधारी खोज के साथ पर @ Domi के समाधान बनाता है वह यह है कि :

/**
 * Find the largest font size (in pixels) that allows the string to fit in the given width.
 * 
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold ?px verdana") -- note the use of ? in place of the font size.
 * @param {width} the width in pixels the string must fit in
 * @param {minFontPx} the smallest acceptable font size in pixels
 * @param {maxFontPx} the largest acceptable font size in pixels
**/
function GetTextSizeForWidth( text, font, width, minFontPx, maxFontPx )
{
    for ( ; ; )
    {
        var s = font.replace( "?", maxFontPx );
        var w = GetTextWidth( text, s );
        if ( w <= width )
        {
            return maxFontPx;
        }

        var g = ( minFontPx + maxFontPx ) / 2;

        if ( Math.round( g ) == Math.round( minFontPx ) || Math.round( g ) == Math.round( maxFontPx ) )
        {
            return g;
        }

        s = font.replace( "?", g );
        w = GetTextWidth( text, s );
        if ( w >= width )
        {
            maxFontPx = g;
        }
        else
        {
            minFontPx = g;
        }
    }
}

Comments

यह आश्चर्यजनक रूप से काम करता है (

— डॉमी

Answer 14

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

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

Answer 15

एक पाठ की चौड़ाई और ऊँचाई के साथ clientWidthऔर प्राप्त किया जा सकता हैclientHeight

var element = document.getElementById ("mytext");

var width = element.clientWidth;
var height = element.clientHeight;

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

element.style.position = "absolute";

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

Answer 16

दीपक नादर के उत्तर का निर्माण , मैंने पाठ और फ़ॉन्ट शैलियों को स्वीकार करने के लिए फ़ंक्शंस पैरामर को बदल दिया। आपको किसी तत्व को संदर्भित करने की आवश्यकता नहीं है। इसके अलावा, आपके 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>

Answer 17

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

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

फ़ंक्शन को नियंत्रण के लिए अलग कर दिए जाने के बाद फिट इवेंट को फंक्शन कॉल को तुरंत निष्पादित करने के लिए उपयोग किया जाता है।

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

Answer 18

बिना 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);

Comments

जब आप एक नंबर सेट नहीं करते हैं, तो काम करता है, क्योंकि कोई जगह नहीं है, यदि आप इसे हटाते हैं, तो यह ठीक काम करेगा: fontSize + "px arial" -> fontSize + "px arial", बस।

— अल्बर्टो एक्यूना

Answer 19

काम करने के उदाहरण की पहेली : 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 s f j
</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");

Answer 20

Element.getClientRects()विधि का एक संग्रह रिटर्न DOMRectवस्तुओं है कि एक ग्राहक में प्रत्येक सीएसएस सीमा बॉक्स के लिए बाउंडिंग आयतों संकेत मिलता है। लौटाया गया मान DOMRectऑब्जेक्ट का एक संग्रह है , जो तत्व से जुड़े प्रत्येक सीएसएस बॉर्डर बॉक्स के लिए है। प्रत्येक DOMRectवस्तु होता है केवल पढ़ने के लिए left, top, rightऔर bottomगुण सीमा बॉक्स का वर्णन, पिक्सेल में, करने के लिए ऊपरी-बाएं रिश्तेदार के साथ व्यूपोर्ट के शीर्ष-छोड़ दिया है।

Element.getClientRects () मोज़िला योगदानकर्ताओं द्वारा CC-BY-SA 2.5 के तहत लाइसेंस प्राप्त है ।

सभी आयत चौड़ाई को समेटने से पिक्सल में कुल टेक्स्ट चौड़ाई मिलती है।

document.getElementById('in').addEventListener('input', function (event) {
    var span = document.getElementById('text-render')
    span.innerText = event.target.value
    var rects = span.getClientRects()
    var widthSum = 0
    for (var i = 0; i < rects.length; i++) {
        widthSum += rects[i].right - rects[i].left
    }
    document.getElementById('width-sum').value = widthSum
})

<p><textarea id='in'></textarea></p>
<p><span id='text-render'></span></p>
<p>Sum of all widths: <output id='width-sum'>0</output>px</p>

Answer 21

मैंने एक छोटा ES6 मॉड्यूल बनाया है (jQuery का उपयोग करता है):

import $ from 'jquery';

const $span=$('<span>');
$span.css({
    position: 'absolute',
    display: 'none'
}).appendTo('body');

export default function(str, css){
    $span[0].style = ''; // resetting the styles being previously set
    $span.text(str).css(css || {});
    return $span.innerWidth();
}

प्रयोग करने में आसान:

import stringWidth from './string_width';
const w = stringWidth('1-3', {fontSize: 12, padding: 5});

ठंडी बात जो आप देख सकते हैं - यह किसी भी सीएसएस विशेषताओं, यहां तक ​​कि पैडिंग को भी ध्यान में रखने की अनुमति देता है!

Answer 22

आप इसे टेक्स्ट क्लोनिंग तकनीक की तुलना में createRange के साथ भी कर सकते हैं, जो अधिक सटीक है:

function getNodeTextWidth(nodeWithText) {
    var textNode = $(nodeWithText).contents().filter(function () {
        return this.nodeType == Node.TEXT_NODE;
    })[0];
    var range = document.createRange();
    range.selectNode(textNode);
    return range.getBoundingClientRect().width;
}

Answer 23

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