পাঠ্যের প্রস্থ গণনা করা হচ্ছে

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>', যদিও এটি কোনও পার্থক্য বলে মনে হচ্ছে না (এটি এফএফ 9 এর সাথে বা এটি ছাড়া কাজ করেছে)।

— shmeeps

যদিও এটির সাথে সাবধানতা অবলম্বন করুন ... এই পদ্ধতিটি শিশু উপাদানগুলিতে কোনও ইভেন্টকে আবদ্ধ করবে।

— brianreavis

আমি এই ফাংশনটি বেশ কয়েকটি উপায়ে ব্যবহার করার চেষ্টা করেছি, তবে এটি শূন্য হতে চলেছে। এই ফাংশনটি আসলে কীভাবে ব্যবহৃত হয় তার জন্য কেউ দয়া করে সিনট্যাক্স পোস্ট করতে পারেন? আমি কি কোন jQuery অবজেক্টে .textWidth () ফাংশনটি চালাচ্ছি? আমি কি এই ফাংশনটিতে পাঠ্য পাস করি? আমি কি jQuery ফাংশন (যেমন te .xtxtWidth (jqObject) হিসাবে ফাংশনটি চালাচ্ছি? কারণ এই বিকল্পগুলির

— কোনওটিই

@ মোজফেচার আপনি $ (নির্বাচক)। টেক্সটউইথ (); এখানে শিখুন। Jquery.com/plugins/basic-plugin-creation/…

— uesports135

Answer 2

এখানে একটি ফাংশন যা অন্যদের চেয়ে ভাল পোস্ট করা কারণ

1. এটা খাটো
2. এটি কাজ করে যখন পাশ করার একটি <input>, <span>বা "string"।
3. এটি ঘন ঘন ব্যবহারের জন্য দ্রুত কারণ এটি একটি বিদ্যমান ডিওএম উপাদান পুনরায় ব্যবহার করে।

ডেমো: 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! সহজ এবং পরিষ্কার।

— ক্যারি এস্টেস

যদিও ভাল, এটি স্পেস পরিচালনা করে না। এই সমাধানটির বর্ধনের জন্য @ এডসিউফির উত্তর দেখুন।

— ব্যাজারপট

যদি উপাদানটির ভিতরে কোনও লুকানো পাঠ্য থাকে, তবে এটি আপনার প্রস্থকে স্কু করবে। এটির জন্য অ্যাকাউন্ট করতে, পাঠ্যের প্রস্থের গণনা করার আগে লুকানো নোডগুলি সরিয়ে ফেলতে ভুলবেন না। লুকানো নোডগুলি নিরাপদে অপসারণ করতে আপনার প্রথমে একটি ক্লোন তৈরি করা উচিত এবং সেখানে অপসারণ করা উচিত।

— thdoan

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

দ্বারা Ajarn গেরহার্ড : কারা উত্তর হিসাবে এই পোস্ট IE8 কর্মরত এই না কারণ আপনি একটি দিতে ভুলে গেছেন /বন্ধের বন্ধনী আগে <span>: TAGcalculator = $('<span style="display: inline-block;" />'),

— পেত্র আর

আপনি যে উপাদানটি মাপছেন তার নীচে যদি শিশু উপাদান থাকে তবে এটি নালায় ফিরে আসবে বলে মনে হচ্ছে। এটি কি শিশু উপাদান ছাড়া কাজ করা যায়? Jsfiddle.net/h22tj/41

— ক্যাস্পার

+1 - আমি কখনই জানতাম না যে একটি আনরোপ () ছিল, যা আমাকে অন্তহীন দুঃখ দিয়েছে।

— ওড়ওলোফিল

এটি সর্বদা Chrome এ বাতিল করে দেয়।

— পান্না

Answer 4

textWidthউত্তর দেওয়া এবং যে ফাংশন একটি গ্রহণ stringএকটি আর্গুমেন্ট নেতৃস্থানীয় এবং সাদা স্পেস trailing হিসাব করবে না (ঐ ডামি কন্টেইনারে অনুষ্ঠিত হয় না) হিসাবে। এছাড়াও, পাঠ্যে যদি কোনও এইচটিএমএল মার্কআপ থাকে তবে তারা কাজ করবে না (একটি সাব-স্ট্রিং <br>কোনও আউটপুট উত্পাদন করবে না এবং  এক জায়গার দৈর্ঘ্য ফিরিয়ে দেবে)।

এটি কেবল একটি textWidthকার্যকারিতা গ্রহণের ক্ষেত্রেই সমস্যা string, কারণ যদি কোনও ডিওএম উপাদান দেওয়া হয়, এবং .html()উপাদানটির প্রতি আহ্বান জানানো হয় তবে সম্ভবত ব্যবহারের ক্ষেত্রে এটি ঠিক করার দরকার নেই।

তবে, উদাহরণস্বরূপ, আপনি যদি কোনও পাঠকের inputউপাদানটির প্রস্থটিকে ব্যবহারকারী প্রকারের (আমার বর্তমান ব্যবহারের ক্ষেত্রে) হিসাবে গতিশীলভাবে পরিবর্তন করতে পাঠ্যের প্রস্থ গণনা করে থাকেন তবে আপনি সম্ভবত  স্ট্রিংটির সাথে শীর্ষস্থানীয় এবং পিছনের স্থানগুলি প্রতিস্থাপন করতে এবং এনকোড করতে চাইবেন থেকে এইচটিএমএল

আমি ফিলফ্রেও এর সমাধানটি ব্যবহার করেছি তাই এর একটি সংস্করণ এখানে এটি সমাধান করে (সংযোজন সম্পর্কিত মন্তব্য সহ):

$.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একা এই মানটি অনুলিপি করে না?

— কোডিং হয়ে গেছে

@ গনকোডিং আপনি কোথায় এই অতিরিক্তগুলি যুক্ত করেছেন?

— ওয়েবম্যাগনেট

@ ওয়েবমাগনেটস: বিদ্যমান .cssপদ্ধতি হিসাবে একই জায়গা , তবে আমি দেখতে পাচ্ছি আমার বন্ধনীগুলি ভুল। হওয়া উচিত css('font-size', this.css('font-size'))।

— 18-18

Answer 5

অসঙ্গত বক্স মডেলগুলির কারণে পাঠ্যের প্রস্থ নির্ধারণ করার চেষ্টা করার সময় jQuery এর প্রস্থের ফাংশনগুলি কিছুটা ছায়াময় হতে পারে। আসল পাঠের প্রস্থ নির্ধারণ করার জন্য নিশ্চিত উপায়টি হ'ল আপনার উপাদানটির ভিতরে ডিভ ইনজেকশন করা:

$.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 এটি টেক্সটের প্রস্থের চেয়ে বাক্সের প্রস্থটি মাপতে পারে বলে মনে হচ্ছে।

— নাথন আর্থার

প্রস্থের সমস্যাটি ঠিক করার পরিবর্তে কেবল একটি স্প্যান ব্যবহার করবেন না? যদি তাই হয় তবে এই ফাংশনটি স্বীকৃত উত্তরের চেয়ে কিছুটা ভাল।

— জোশ

@ জোশ: আপনি যদি এটির সাথে প্রতিস্থাপন করেন তবে 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")করি তবে আমি সেই নির্দিষ্ট পাত্রে প্রয়োগ করার সময় "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

আইই 8 সাপোর্টের সাথে এটিই আমার পক্ষে সেরা সমাধান এবং প্রক্রিয়াটির উপাদানটির সাথে কোনও আবদ্ধতা ভাঙবে না! ধন্যবাদ.

— ouija

দ্রষ্টব্য: একটি 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

নিকোতে সামান্য পরিবর্তন, যেহেতু .children () খালি সেটটি ফেরত দেবে যদি আমরা এইচ 1 বা পি এর মতো কোনও পাঠ্য উপাদান উল্লেখ করি । সুতরাং আমরা .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এড়াতে কেবল সাময়িকভাবে ইনলাইন সিএসএসে যুক্ত করুন ।

— কোডিং হয়ে গেছে

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

.WrapInner এর জন্য +1। আপনি সম্ভবত জানেন যে, jQuery খাঁটি পাঠ্য উপাদানের সাথে কাজ করা জাহান্নাম। যদি অন্য কোনও jQuery পদ্ধতি প্রযোজ্য হয় তবে দয়া করে আমাকে জানান। আমাকে .get (0)। শিশুদের অবলম্বন করতে হয়েছিল এবং এটি সুন্দর নয়।

— ওড়ওলোফিল

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

পাঠ্যটি সহ পেতে কল করুন কলকামউইথ ()। এটি পুরোপুরি সূক্ষ্ম কাজ করে।

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

দ্রষ্টব্য: - আপনি যদি ইনলাইন .css চান তবে কেবল শৈলীতে ফন্ট-বিবরণ দিন।

Answer 16

আমি আমার প্রয়োজন অনুসারে কাজ করতে নিকোর কোডটি সংশোধন করেছি।

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

আমি। বিষয়বস্তুগুলি ()। শিশুদের হিসাবে ব্যবহার করছি () আমার প্রয়োজনীয় পাঠ্য নোডগুলি ফেরায় না। আমি আরও দেখতে পেলাম যে রিটার্ন করা প্রস্থটি ভিউপোর্টের প্রস্থের দ্বারা প্রভাবিত হয়েছিল যার ফলে মোড়কের কারণ হ'ল আমি সাদা স্থান ব্যবহার করছি: এখন চাপ; ভিউপোর্ট প্রস্থ নির্বিশেষে সঠিক প্রস্থ পেতে।

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% কাজ করতে তালিকাভুক্ত সমাধান কোন পাওয়া গেল না, তাই এই নিয়ে এসেছেন সংকর @philfreo থেকে @chmurson থেকে ধারনা (যা @Okamera উপর ভিত্তি করে ঘুরে ছিল না) উপর ভিত্তি করে এবং:

(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

কখনও কখনও আপনাকে অতিরিক্ত উচ্চতা এবং কেবল পাঠ্যই নয় , এইচটিএমএল প্রস্থও পরিমাপ করতে হবে । আমি @ ফিলিফ্রেও উত্তর নিয়েছি এবং এটি আরও নমনীয় এবং দরকারী করে তুলেছি:

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

বিভিন্ন পিতামাতার জন্য পাঠ্যের প্রস্থ আলাদা হতে পারে, উদাহরণস্বরূপ, আপনি যদি এইচ 1 ট্যাগে কোনও পাঠ্য যুক্ত করেন তবে এটি ডিভ বা লেবেলের চেয়ে প্রশস্ত হবে, সুতরাং আমার সমাধানটি এর মতো:

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

জেএসফিডাল গিটহাব

Answer 22

আমার মনে হয় আপনার ব্যবহার করা উচিত $('.calltoaction').val;

এছাড়াও, আমি এর জন্য ক্লাসের পরিবর্তে আইডি (#) ব্যবহার করব .. আপনার যদি এমন ক্লাসগুলির একটির বেশি থাকে তবে এটি কীভাবে এটি পরিচালনা করবে?

Comments

হ্যাঁ, ডকুমেন্টের পরে আরও একটি রয়েছে। আপনি আইডি পরামর্শ করবেন কেন?

— ডোম