पाठ की चौड़ाई की गणना

Question

मैं jQuery का उपयोग करके पाठ की चौड़ाई की गणना करने की कोशिश कर रहा हूं। मुझे यकीन नहीं है कि क्या, लेकिन मैं निश्चित रूप से कुछ गलत कर रहा हूं।

तो, यहाँ कोड है:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

Comments

तो, किस तरह से वह कोड काम नहीं कर रहा है? इसे अलग तरह से करने की क्या जरूरत है?

— सिक्सटेन ओटो

Answer 1

इसने मेरे लिए बेहतर काम किया:

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

Comments

+1 - यह सही मायने में टेक्स्ट को मापता है, न कि केवल ब्रेनरेविस के समाधान जैसे ब्लॉक तत्व को।

— बेन

स्लिक। +1। ऐसा लगता है कि आप के बाद तीसरी लाइन पर एक अर्ध कोलन याद कर रहे हैं '</span>', हालांकि यह कोई फर्क नहीं पड़ता है (FF9 पर इसके साथ या इसके बिना काम किया है)।

— शमीप्स

हालांकि इसके साथ सावधान रहें ... यह विधि बाल तत्वों पर किसी भी घटना को रोक देगी।

— 21

मैंने कई तरीकों से इस फ़ंक्शन का उपयोग करने की कोशिश की है, लेकिन यह अशक्त लौटता रहता है। क्या कोई कृपया वाक्य रचना पोस्ट कर सकता है कि यह फ़ंक्शन वास्तव में कैसे उपयोग किया जाता है? क्या मैं। Jxt ऑब्जेक्ट पर .textWidth () फ़ंक्शन चलाता हूं? क्या मैं इस फ़ंक्शन को टेक्स्ट पास करता हूं? क्या मैं फ़ंक्शन को jQuery फ़ंक्शन (यानी $ .textWidth (jqObject) के रूप में चलाता हूं? क्योंकि उन विकल्पों में से कोई भी काम नहीं करता है। धन्यवाद ...

— moosefetcher

@moosefetcher आप $ (चयनकर्ता) .textWidth () करेंगे; यहाँ देखें learn.jquery.com/plugins/basic-plugin-creation/…

— uesports135

Answer 2

यहाँ एक फ़ंक्शन है जो दूसरों की तुलना में बेहतर है क्योंकि पोस्ट किया गया है

1. यह छोटा है
2. यह काम करता है जब गुजर एक <input>, <span>या"string" ।
3. यह लगातार उपयोग के लिए तेज़ है क्योंकि यह एक मौजूदा DOM तत्व का पुन: उपयोग करता है।

डेमो: http://jsfiddle.net/philfreo/MqM76/

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

Comments

वाह! अत्यंत कमाल का!

— मिशेल त्रियाना

महान समाधान, स्वीकार किया जाना चाहिए जवाब, मुझे लगता है! धन्यवाद मित्र!

— इलिया रोस्तोवत्से

Fantastico! सरल और साफ।

— कैरी एस्ट्स

जबकि अच्छा, यह रिक्त स्थान को संभालता नहीं है। इस समाधान को बढ़ाने के लिए @ edsioufi का उत्तर देखें।

— बेजरस्पॉट

यदि तत्व के अंदर छिपा हुआ पाठ है, तो यह आपकी चौड़ाई को तिरछा कर देगा। इसका हिसाब रखने के लिए, पाठ की चौड़ाई की गणना करने से पहले छिपे हुए नोड को निकालना सुनिश्चित करें। छिपे हुए नोड्स को सुरक्षित रूप से हटाने के लिए, आपको संभवतः पहले एक क्लोन बनाना चाहिए और वहां से निष्कासन करना चाहिए।

— दद्दन

Answer 3

मेरा समाधान

$.fn.textWidth = function(){
    var self = $(this),
        children = self.children(),
        calculator = $('<span style="display: inline-block;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

मूल रूप से रूण पर एक सुधार, जो .htmlइतने हल्के ढंग से उपयोग नहीं करता है

Comments

अजरन गेरहार्ड द्वारा जिन्होंने इसे एक उत्तर के रूप में पोस्ट किया: यह IE8 में काम नहीं कर रहा है क्योंकि आप टैग /के समापन कोष्ठक से पहले गायब हैं <span>:calculator = $('<span style="display: inline-block;" />'),

— पेट्र आर।

यदि आप जिस तत्व को माप रहे हैं, उसके नीचे बाल तत्व है, तो यह अशक्त लगता है। क्या इसे बाल तत्व के बिना काम करने के लिए बनाया जा सकता है? देखें jsfiddle.net/h22tj/41

— कैस्पर

+1 - मुझे कभी नहीं पता था कि एक अनकैप () था, जिसने मुझे अंतहीन दु: ख दिया है।

— ऑरवेलोफाइल

यह हमेशा Chrome पर नल देता है।

— पन्नाधाय

Answer 4

textWidthजवाब में प्रदान की और कहा कि कार्य को स्वीकार stringएक तर्क प्रमुख और सफेद रिक्त स्थान अनुगामी के लिए खाते में नहीं होगा (उन डमी कंटेनर में गाया नहीं कर रहे हैं) के रूप में। साथ ही, वे काम नहीं करेंगे यदि पाठ में कोई html मार्कअप (एक उप-स्ट्रिंग <br>किसी भी आउटपुट का उत्पादन नहीं करेगा और  करेगा एक स्थान की लंबाई लौटाएगा) ।

यह केवल उन textWidthकार्यों के लिए एक समस्या है जो एक को स्वीकार करते हैं string, क्योंकि यदि कोई DOM तत्व दिया जाता है, और.html() तत्व को कहा जाता है, तो ऐसे उपयोग के मामले के लिए इसे ठीक करने की आवश्यकता नहीं है।

लेकिन, उदाहरण के लिए, यदि आप पाठ की चौड़ाई की गणना कर रहे हैं, तो पाठ inputप्रकार की चौड़ाई को उपयोगकर्ता प्रकारों (मेरे वर्तमान उपयोग के मामले) के रूप में संशोधित कर सकते हैं, आप शायद  स्ट्रिंग के साथ प्रमुख और अनुगामी स्थानों को बदलना और उन्हें एन्कोड करना चाहेंगे। html को।

मैंने दार्शनियो के समाधान का उपयोग किया, इसलिए इसका एक संस्करण है जो इसे ठीक करता है (परिवर्धन पर टिप्पणियों के साथ):

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
    var htmlText = text || this.val() || this.text();
    htmlText = $.fn.textWidth.fakeEl.text(htmlText).html(); //encode to Html
    htmlText = htmlText.replace(/\s/g, "&nbsp;"); //replace trailing and leading spaces
    $.fn.textWidth.fakeEl.html(htmlText).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

Comments

धन्यवाद। आपका उत्तर सबसे मूल्यवान है।

— विशाल

अजीब तरह से, जब मैंने यह एक कोशिश की, तो यह सही ढंग से कॉपी नहीं किया font-size। मुझे css('font-size'), this.css('font-size'))इसके लिए काम करना था। कोई भी विचार क्यों fontअकेले उस मूल्य की नकल नहीं करता है?

— कोडिंग किया

@GoneCoding आपने उन एक्स्ट्रा को कहाँ जोड़ा?

— webmagnets

@webmagnets: मौजूदा .cssपद्धति के समान स्थान , लेकिन मुझे लगता है कि मेरे ब्रैकेट गलत हैं। होना चाहिए css('font-size', this.css('font-size'))।

— कोडिंग हो गई

Answer 5

असंगत बॉक्स मॉडल के कारण पाठ की चौड़ाई निर्धारित करने की कोशिश करते समय jQuery की चौड़ाई कार्य थोड़ा छायादार हो सकता है। वास्तविक पाठ चौड़ाई निर्धारित करने के लिए अपने तत्व के अंदर div इंजेक्षन करने का निश्चित तरीका होगा:

$.fn.textWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};

इस मिनी प्लगइन का उपयोग करने के लिए, बस:

$('.calltoaction').textWidth();

Comments

क्या यह आपको पाठ के बजाय ब्लॉक की चौड़ाई नहीं देगा?

— जोश रिकार्ड

-1 यह वास्तव में टेक्स्ट की चौड़ाई के बजाय बॉक्स की चौड़ाई को मापने के लिए लगता है।

— नाथन आर्थर

बस एक div के बजाय एक स्प्रेड का उपयोग करके चौड़ाई की समस्या को ठीक नहीं करेंगे? यदि ऐसा है, तो यह फ़ंक्शन स्वीकृत उत्तर की तुलना में थोड़ा बेहतर है।

— जोश

@ जोश: यदि आप इसे अपने साथ प्रतिस्थापित करते हैं तो आपको spanशून्य मिलता है। इस समाधान को एक पर आज़माया H2, जहां मूल तत्व अतिप्रवाहित हैं, और मुझे केवल पाठ की छोटी लंबाई मिलती है। शायद यह कैसे है की व्याख्या काम करने वाला इसे बेहतर बनाने में मदद करेगा?

— चला गया

Answer 6

मैंने पाया कि यह समाधान अच्छी तरह से काम करता है और इसे आकार देने से पहले मूल फ़ॉन्ट विरासत में मिला है:

$.fn.textWidth = function(text){
  var org = $(this)
  var html = $('<span style="postion:absolute;width:auto;left:-9999px">' + (text || org.html()) + '</span>');
  if (!text) {
    html.css("font-family", org.css("font-family"));
    html.css("font-size", org.css("font-size"));
  }
  $('body').append(html);
  var width = html.width();
  html.remove();
  return width;
}

Comments

मैंने इसे उपयोग करना समाप्त कर दिया, लेकिन जोड़ा org.css("font-weight")। इसके अलावा, मैं यह कहूंगा कि यह if(!text)हिस्सा एकतरफा है। अगर मैं उदा का उपयोग करता हूं तो मैं jQuery("#someContainer").textWidth("Lorem ipsum")उस विशेष कंटेनर में लागू होने पर "लोरम इप्सम" की पाठ चौड़ाई जानना चाहता हूं।

— धीरे

Answer 7

न तो रूण का और न ही ब्रेन का मेरे लिए काम कर रहा था जब पाठ को रखने वाले तत्व की चौड़ाई तय थी। मैंने ओकेमेरा के समान कुछ किया। यह कम चयनकर्ताओं का उपयोग करता है।

संपादित करें: यह संभवतः उन तत्वों के लिए काम नहीं करेगा जो रिश्तेदार का उपयोग करते हैं font-size, क्योंकि निम्नलिखित htmlCalcतत्व सम्मिलित तत्व में bodyइस प्रकार माता-पिता के संबंध के बारे में जानकारी खो देता है।

$.fn.textWidth = function() {
    var htmlCalc = $('<span>' + this.html() + '</span>');
    htmlCalc.css('font-size', this.css('font-size'))
            .hide()
            .prependTo('body');
    var width = htmlCalc.width();
    htmlCalc.remove();
    return width;
};

Comments

यह IE8 समर्थन के साथ मेरे लिए सबसे अच्छा समाधान था और इस प्रक्रिया में तत्व के लिए किसी भी बंधन को नहीं तोड़ेगा! धन्यवाद।

— .इज

नोट: एक jQuery विस्तार विधि में, thisपहले से ही एक jQuery वस्तु है इसलिए $(this)बेमानी है।

— कोडिंग चला गया

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

— पांडावुड

Answer 8

यदि आपका चयन किसी चुनिंदा बॉक्स में पाठ के साथ करने की कोशिश कर रहा है या यदि वे दो काम कर रहे हैं, तो इसके बजाय यह प्रयास करें:

$.fn.textWidth = function(){
 var calc = '<span style="display:none">' + $(this).text() + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

या

function textWidth(text){
 var calc = '<span style="display:none">' + text + '</span>';
 $('body').append(calc);
 var width = $('body').find('span:last').width();
 $('body').find('span:last').remove();
 return width;
};

यदि आप पहले पाठ को हथियाना चाहते हैं

Answer 9

बात, आप गलत कर रहे हैं, कि आप cTxt पर एक विधि कह रहे हैं, जो एक सरल स्ट्रिंग है न कि jQuery ऑब्जेक्ट। cTxt वास्तव में निहित पाठ है।

Answer 10

Nico के लिए थोड़ा परिवर्तन, क्योंकि .children () खाली सेट लौटाएगा यदि हम एक h1 या p जैसे पाठ तत्व का संदर्भ दे रहे हैं । इसलिए हम .contents () का उपयोग करेंगे, और प्रयोग इस $ के बजाय (यह) हम एक jQuery वस्तु पर एक विधि बना रहे हैं के बाद से।

$.fn.textWidth = function(){
    var contents = this.contents(),
        wrapper  = '<span style="display: inline-block;" />',
        width    = '';

    contents.wrapAll(wrapper);
    width = contents.parent().width(); // parent is now the wrapper
    contents.unwrap();
    return width;
    };

Answer 11

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

इसलिए, एक और टिप यह जांचने के लिए है कि क्या व्हाट्सएप समस्या पैदा कर रहा है। उपयोग

 

गैर-ब्रेकिंग स्पेस और देखें कि क्या इसे ठीक करता है।

अन्य कार्यों से लोगों ने सुझाव दिया कि वे भी अच्छी तरह से काम करें, लेकिन यह व्हाट्सएप परेशानी का कारण था।

Comments

इससे white-space: nowrapबचने के लिए बस अस्थायी रूप से इनलाइन CSS जोड़ें ।

— चला गया

Answer 12

आप पाठ नोड्स और एक दिया तत्व के अंदर तत्वों का मिश्रण की चौड़ाई निर्धारित करने के लिए कोशिश कर रहे हैं, तो आप के साथ सभी सामग्री को रैप करने के लिए जरूरत (wrapInner) , चौड़ाई की गणना करें, और फिर सामग्री को खोल दें।

* नोट: आपको एक अनरैपइनर () फ़ंक्शन जोड़ने के लिए jQuery का विस्तार करना होगा क्योंकि यह डिफ़ॉल्ट रूप से प्रदान नहीं किया जाता है।

$.fn.extend({
  unwrapInner: function(selector) {
      return this.each(function() {
          var t = this,
              c = $(t).children(selector);
          if (c.length === 1) {
              c.contents().appendTo(t);
              c.remove();
          }
      });
  },
  textWidth: function() {
    var self = $(this);
    $(this).wrapInner('<span id="text-width-calc"></span>');
    var width = $(this).find('#text-width-calc').width();
    $(this).unwrapInner();
    return width;
  }
});

Comments

+1 .wrapInner के लिए। जैसा कि आप शायद जानते हैं, jQuery में शुद्ध पाठ तत्वों के साथ काम करना नरक है। यदि कोई अन्य jQuery विधियां लागू होती हैं, तो कृपया मुझे बताएं। मुझे .get (0) .children का सहारा लेना पड़ा है और यह सुंदर नहीं है।

— ऑरवेलोफाइल

Answer 13

@ फिल्फ़्रेओ के उत्तर पर विस्तार:

मैंने जांचने की क्षमता जोड़ी है text-transform, क्योंकि text-transform: uppercaseआमतौर पर चीजें पाठ को व्यापक बनाने के लिए होती हैं।

$.fn.textWidth = function (text, font, transform) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text())
        .css('font', font || this.css('font'))
        .css('text-transform', transform || this.css('text-transform'));
    return $.fn.textWidth.fakeEl.width();
};

Answer 14

var calc = '<span style="display:none; margin:0 0 0 -999px">' + $('.move').text() + '</span>';

Answer 15

टेक्स्ट के साथ पाने के लिए getColumnWidth () पर कॉल करें। यह पूरी तरह से ठीक काम करता है।

someFile.css
.columnClass { 
    font-family: Verdana;
    font-size: 11px;
    font-weight: normal;
}


function getColumnWidth(columnClass,text) { 
    tempSpan = $('<span id="tempColumnWidth" class="'+columnClass+'" style="display:none">' + text + '</span>')
          .appendTo($('body'));
    columnWidth = tempSpan.width();
    tempSpan.remove();
return columnWidth;
}

नोट: - यदि आप इनलाइन चाहते हैं। .cs केवल शैली में फ़ॉन्ट-विवरण पास करते हैं।

Answer 16

मैंने अपनी आवश्यकताओं के लिए काम करने के लिए Nico का कोड संशोधित किया।

$.fn.textWidth = function(){
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

मैं .contents () का उपयोग कर रहा हूँ .children () पाठ नोड्स को वापस नहीं करता, जिसकी मुझे आवश्यकता थी। मैंने यह भी पाया कि लौटी हुई चौड़ाई व्यूपोर्ट की चौड़ाई से प्रभावित थी, जो रैपिंग का कारण बन रही थी, इसलिए मैं व्हाइट-स्पेस का उपयोग कर रहा हूं: नॉरैप; व्यूपोर्ट चौड़ाई की परवाह किए बिना सही चौड़ाई पाने के लिए।

Answer 17

$.fn.textWidth = function(){
        var w = $('body').append($('<span stlye="display:none;" id="textWidth"/>')).find('#textWidth').html($(this).html()[0]).width();
        $('#textWidth').remove();
        console.log(w);
        return w;
    };

लगभग एक लाइनर। आपको पहले चरित्र के साथ देता है

Answer 18

मुझे 100% काम करने के लिए सूचीबद्ध कोई भी समाधान नहीं मिला, इसलिए इस हाइब्रिड के साथ आया , जो @chmurson के विचारों पर आधारित था (जो कि @Okamera पर आधारित था) और @philfreo से भी:

(function ($)
{
    var calc;
    $.fn.textWidth = function ()
    {
        // Only create the dummy element once
        calc = calc || $('<span>').css('font', this.css('font')).css({'font-size': this.css('font-size'), display: 'none', 'white-space': 'nowrap' }).appendTo('body');
        var width = calc.html(this.html()).width();
        // Empty out the content until next time - not needed, but cleaner
        calc.empty();
        return width;
    };
})(jQuery);

टिप्पणियाँ:

• this एक jQuery विस्तार विधि के अंदर पहले से ही एक jQuery वस्तु है, इसलिए सभी अतिरिक्त की कोई आवश्यकता नहीं है $(this) जो कई उदाहरण हैं।
• यह केवल डमी तत्व को एक बार शरीर में जोड़ता है, और इसका पुन: उपयोग करता है।
• आपको यह भी निर्दिष्ट करना चाहिए white-space: nowrap, बस यह सुनिश्चित करने के लिए कि यह इसे एक ही लाइन के रूप में मापता है (और अन्य पेज स्टाइल के आधार पर लाइन रैप नहीं)।
• मुझे यह fontअकेले काम करने के लिए नहीं मिला और मुझे स्पष्ट रूप से कॉपी करना पड़ा font-size। निश्चित नहीं कि अभी तक (अभी भी जांच क्यों) हो रही है।
• यह उस तरह से इनपुट फ़ील्ड का समर्थन नहीं@philfreo करता है।

Answer 19

कभी-कभी आपको अतिरिक्त ऊंचाई और न केवल पाठ , बल्कि HTML चौड़ाई भी मापनी होगी । मैंने @philfreo उत्तर लिया और इसे अधिक फ्लेक्सिबल और उपयोगी बनाया:

function htmlDimensions(html, font) {
  if (!htmlDimensions.dummyEl) {
    htmlDimensions.dummyEl = $('<div>').hide().appendTo(document.body);
  }
  htmlDimensions.dummyEl.html(html).css('font', font);
  return {
    height: htmlDimensions.dummyEl.height(),
    width: htmlDimensions.dummyEl.width()
  };
}

Answer 20

पाठ की चौड़ाई अलग-अलग माता-पिता के लिए भिन्न हो सकती है, उदाहरण के लिए यदि u एक पाठ को h1 टैग में जोड़ता है तो यह div या लेबल से अधिक व्यापक होगा, इसलिए मेरा समाधान इस प्रकार है:

<h1 id="header1">

</h1>

alert(calcTextWidth("bir iki", $("#header1")));

function calcTextWidth(text, parentElem){
    var Elem = $("<label></label>").css("display", "none").text(text);
    parentElem.append(Elem);
  var width = Elem.width();
  Elem.remove();
    return width;
}

Answer 21

मुझे बड़ी मात्रा में पाठ के लिए @ रन-कगाड़ जैसे समाधानों से परेशानी थी। मुझे यह पता चला:

$.fn.textWidth = function() {
	var width = 0;
	var calc = '<span style="display: block; width: 100%; overflow-y: scroll; white-space: nowrap;" class="textwidth"><span>' + $(this).html() + '</span></span>';
	$('body').append(calc);
	var last = $('body').find('span.textwidth:last');
	if (last) {
			var lastcontent = last.find('span');
			width = lastcontent.width();
			last.remove();
	}
	return width;
};

JSFiddle GitHub

Answer 22

मुझे लगता है कि आपको उपयोग करना चाहिए $('.calltoaction').val;

इसके अलावा, मैं उस के लिए एक वर्ग के बजाय आईडी (#) का उपयोग कर रहा हूँ .. अगर u ऐसी कक्षाओं में से एक से अधिक है जो इसे कैसे संभालेगा?

Comments

हाँ, दस्तावेज़ में एक और भी है। आप आईडी क्यों सुझाएंगे?

— डोम