জাভাস্ক্রিপ্ট সহ পাঠ্য প্রস্থ গণনা করুন

Question

আমি একটি স্ট্রিংয়ের প্রস্থ গণনা করতে জাভাস্ক্রিপ্ট ব্যবহার করতে চাই। কোনও মনোস্পেস টাইপফেস ব্যবহার না করেই কি এটি সম্ভব?

যদি এটি অন্তর্নির্মিত না হয় তবে আমার একমাত্র ধারণাটি প্রতিটি চরিত্রের জন্য প্রস্থের একটি সারণী তৈরি করা, তবে এটি বেশ অযৌক্তিক বিশেষত ইউনিকোড এবং বিভিন্ন ধরণের মাপের সমর্থন (এবং এই বিষয়ে সমস্ত ব্রাউজার)।

Comments

সাবধান হন যে আপনি যদি বাহ্যিক ফন্টগুলি ব্যবহার করেন তবে সেগুলি লোড করার পরে আপনাকে নীচের কৌশলগুলি ব্যবহার করতে হবে। আপনি যদি তাদের ক্যাশে রেখে থাকেন বা আপনার যদি স্থানীয় সংস্করণ ইনস্টল করা থাকে তবে আপনি এটি উপলব্ধি করতে পারবেন না।

— শেঠ ডাব্লু। ক্লেইন

Answer 1

নিম্নলিখিত শৈলীগুলির সাথে একটি ডিআইভি স্টাইলযুক্ত তৈরি করুন। আপনার জাভাস্ক্রিপ্টে, ফন্টের আকার এবং বৈশিষ্ট্যগুলি সেট করুন যা আপনি পরিমাপের জন্য চেষ্টা করছেন, ডিআআইভিতে আপনার স্ট্রিংটি রাখুন, তারপরে ডিআইভির বর্তমান প্রস্থ এবং উচ্চতাটি পড়ুন। এটি সামগ্রীতে ফিট করার জন্য প্রসারিত হবে এবং আকারটি স্ট্রিং রেন্ডার আকারের কয়েকটি পিক্সেলের মধ্যে থাকবে।

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.1 মিম; D যে একটি ডিআইভি উপাদান প্রতিফলিত করবে না। আপনাকে অবশ্যই নিশ্চিত করতে হবে যে জায়গাগুলি শৈলীগুলি যেখানে আপনি পাঠ্যটি ব্যবহার করবেন তার জন্য উপযুক্ত।

— জিম

ডিট্টো জিমের মন্তব্য - কনটেইনারটি নিশ্চিত করার জন্য ডাবল-চেক করুন, এই ক্ষেত্রে ডিভিএসে, সিএসএস নির্বাচনের নিয়মের মাধ্যমে এতে অন্য কোনও স্টাইল প্রয়োগ করা হয়নি যা আপনি সেই সময়ে সচেতন হতে পারেন না। আপনি পরিমাপ করার আগে যা যত্নশীল সেগুলি প্রয়োগ করার আগে ধারক থেকে সমস্ত প্রাসঙ্গিক স্টাইল স্ট্রিপ করুন।

— জেসন বুটিং

আপনার সাদা-স্পেসেও রাখা উচিত: আপনি যদি মনে করেন যে পাঠ্যটি ব্রাউজারের প্রস্থকে ছাড়িয়ে যাবে।

— হার্ব কাউডিল

@ বিগোগ হ্যাকিং এর চারপাশে হ'ল কেন আমি নীচে অন্যরকম, কম হ্যাকির পরামর্শ দিই। এখানে এটি একবার দেখুন ।

— ডোমি

শুধু কৌতূহল +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

এই ফিডল এই ক্যানভাস পদ্ধতিটিকে বব মন্টিভার্ডের ডিওএম-ভিত্তিক পদ্ধতির পরিবর্তনের সাথে তুলনা করে , যাতে আপনি ফলাফলের যথার্থতা বিশ্লেষণ করতে এবং তুলনা করতে পারেন।

এই পদ্ধতির বিভিন্ন সুবিধা রয়েছে যার মধ্যে রয়েছে:

• অন্যান্য (ডিওএম-ভিত্তিক) পদ্ধতির চেয়ে আরও সংক্ষিপ্ত এবং নিরাপদ কারণ এটি বিশ্বব্যাপী রাষ্ট্র যেমন আপনার ডোমকে পরিবর্তন করে না।
• আরও ক্যানভাস পাঠ্য বৈশিষ্ট্য যেমন textAlignএবং এর মাধ্যমে আরও কাস্টমাইজেশন করা সম্ভব textBaseline।

দ্রষ্টব্য: আপনি যখন আপনার ডিওমে পাঠ্য যুক্ত করবেন তখন প্যাডিং, মার্জিন এবং সীমানার অ্যাকাউন্টটিও মনে রাখবেন ।

দ্রষ্টব্য 2: কিছু ব্রাউজারে, এই পদ্ধতিটি উপ-পিক্সেল যথার্থতা দেয় (ফলাফলটি একটি ভাসমান পয়েন্ট সংখ্যা হয়), অন্যদের কাছে এটি দেয় না (ফলাফলটি কেবলমাত্র একটি আন্তঃ)। অসঙ্গতি এড়াতে আপনি ফলাফলটিতে Math.floor(বা Math.ceil) চালাতে চাইতে পারেন । যেহেতু ডিওএম-ভিত্তিক পদ্ধতিটি কখনই উপ-পিক্সেল সঠিক নয়, এই পদ্ধতির এখানে অন্যান্য পদ্ধতির তুলনায় আরও উচ্চতর নির্ভুলতা রয়েছে।

এই জেএসপিফার অনুসারে (মন্তব্যে অবদানকারীদের ধন্যবাদ), ক্যানভাস পদ্ধতি এবং ডোম-ভিত্তিক পদ্ধতিটি সমানভাবে দ্রুত, যদি ক্যাচিং ডিওএম-ভিত্তিক পদ্ধতিতে যুক্ত হয় এবং আপনি ফায়ারফক্স ব্যবহার করছেন না। ফায়ারফক্সে, কোনও কারণে, এই ক্যানভাস পদ্ধতিটি ডিওএম-ভিত্তিক পদ্ধতির (সেপ্টেম্বর 2014 হিসাবে) তুলনায় অনেক দ্রুত ।

Comments

এটি একটি দুর্দান্ত বিকল্প, আমি এটি সম্পর্কে জানতাম না। কখনও এর পারফরম্যান্সকে ডিওমে পরিমাপের পারফরম্যান্সের সাথে তুলনা করুন?

— সিম্পলজি

আমি সেই জেএসপিআফ বেঞ্চমার্কে ক্যাচিং যুক্ত করেছি। এখন দুটি পদ্ধতি সমানভাবে রয়েছে

— ব্র্যান্ডন ব্লুম

@ মার্টিন হাহ? "অনেকগুলি এইচটিএমএল উপাদান" এখানে কিছু করার কি আছে? এই উদাহরণে ক্যানভাস বস্তু এমনকি ডিওএম-এর সাথে সংযুক্ত নয়। এমনকি এটি থেকে আলাদা হয়েও ক্যানভাস অঙ্কনের প্রসঙ্গে ফন্ট পরিবর্তন করা আপনার strokeText()বা না হওয়া পর্যন্ত এমনকি ক্যানভাসকে প্রভাবিত করে না fillText()। সম্ভবত আপনি একটি ভিন্ন উত্তর মন্তব্য করতে চেয়েছিলেন?

— আজেদি 32

সুন্দর সমাধান। আমি ডোমের উত্তরের আশেপাশে কয়েকটি অন্যান্য পদ্ধতি গুটিয়ে রেখেছি যাতে আমি করতে পারি - শেষের দিকে উপবৃত্ত (()) দিয়ে একটি (সম্ভাব্য) কাটা স্ট্রিংটি পান যদি এটি কোনও প্রদত্ত জায়গায় ফিট না করে (যতটা স্ট্রিং থাকে তত পরিমাণে) যতটা সম্ভব ব্যবহার করা হবে) - একটি JQuery এলিমেন্টে পাস করুন যা (সম্ভবত সংক্ষিপ্ত) স্ট্রিংটি ধারণ করে এবং ফন্টের বৈশিষ্ট্যগুলি গতিশীলভাবে নির্ধারণ করে যাতে তাদের হার্ড-কোডড না করতে হয়, যাতে সিএসএস ফন্টের বৈশিষ্ট্যগুলি ভঙ্গ না করে পরিবর্তিত হতে দেয় allowing বিন্যাস. জেএসফিডেল এখানে: jsfiddle.net/brebey/1q94gLsu/6/e এম্বেড

— ব্রবে

ভাল কারণ ব্যবহারকারী এটি দেখে না!

— ক্লাবে 45

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

ধন্যবাদ জর্ডান। একটি জিনিস আমি যুক্ত করব, আপনি যদি একই পৃষ্ঠায় অনেক বার কল করে থাকেন, এবং পারফরম্যান্স একটি সমস্যা হয়ে থাকে, আপনি ডিআইভি চালিয়ে যেতে পারেন, এবং কেবল বিষয়বস্তু পরিবর্তন করতে এবং প্রস্থটি পরীক্ষা করতে পারেন। আমি কেবল এটি এইভাবে করেছিলাম তাই একবার যখন সমস্ত কিছু বলা এবং করা হয়ে যায়, আপনি যখন শুরু করেছিলেন তখন ডম একই হবে

— বব মন্টেভার্দে

Stringএটি আপনার প্রোগ্রামের উদ্বেগের বিভাজন (পৃথক কোর কোড বনাম ইউআই কোড) হ্রাস করার কারণে আমি এই পদ্ধতিটি যুক্ত করব না । কল্পনা করুন যে আপনি আপনার মূল

— কোডটিকে

এটি খারাপ ডিজাইন , এটি কেবল আপনার দৃষ্টিতে আপনার মডেলকে জুড়ি দেয় না তবে এটি সরাসরি jQuery এর সাথে জুড়ে দেয়। তারপরে, এটি প্রত্যাবর্তনকারী নরক, এটি অবশ্যই ভাল স্কেল করবে না।

— জেমস

আপনি যদি ভাসমান মানটি চান তবে আপনি 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

হাই আপনার উত্তর সত্যিই helpfull তবে .cssText .style পরিবর্তে আই ই 8 সমর্থন এবং নিম্ন করার জন্য ব্যবহার করা হয় ..

— দিলীপ রাজকুমার

এই উত্তরটি দুর্দান্ত, তবে যখন আমি একটি বৃহত টুকরো টেক্সট তৈরি করি, তখন এটি কয়েক পিক্সেল ভুল হয়ে যায়। প্রস্থটি পূর্ণসংখ্যা নয় বলে এটি কি?

— বব্রট্রোপো

Answer 6

ExtJS JavaScript লাইব্রেরি নামক Ext.util.TextMetrics যে, "লেখার ব্লক জন্য সুনির্দিষ্ট পিক্সেল পরিমাপ উপলব্ধ যাতে আপনি ঠিক কিভাবে উচ্চ নির্ধারণ করতে পারেন এবং চওড়া, পিক্সেলে, টেক্সট একটি নির্দিষ্ট ব্লক হতে হবে" একটি মহান বর্গ হয়েছে। আপনি এটি সরাসরি ব্যবহার করতে পারেন বা এটি কীভাবে হয় তা দেখতে কোডের উত্সটি দেখতে পারেন।

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

Comments

ExtJS একটি বিজোড় লাইসেন্স আছে। হয় আপনি বর্তমান রক্ষণাবেক্ষণকারীদের, সেনচা সংস্থা এটি ব্যবহার করার জন্য অর্থ প্রদান করুন বা আপনার অ্যাপ্লিকেশনটিতে আপনাকে সম্পর্কিত সমস্ত কোড ওপেন-সোর্স করতে হবে। এটি বেশিরভাগ সংস্থার জন্য শো স্টপার। অন্যদিকে, jQuery অত্যন্ত অনুমতিপ্রাপ্ত এমআইটি লাইসেন্স ব্যবহার করে।

— দেবদানকে

জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে ওপেন সোর্সের প্রয়োজনীয়তা পূরণ করে না? আপনি পৃষ্ঠাটি প্রত্যেকে দেখার জন্য উত্সটি সরবরাহ করুন।

— প্যাট্রিকও

উত্স কোড এবং ওপেন সোর্সটি দেখতে সক্ষম হওয়ার মধ্যে পার্থক্য রয়েছে, যা লাইসেন্সিং দ্বারা সংজ্ঞায়িত হয়।

— পার্কার অল্ট

আমরা এখনও এক্সজেজেএস :-) ব্যবহার করছি তাদের কাছ থেকে ধন্যবাদ

— রাজা ওয়াডিয়া

আপনার উচিত ছিল এক্সটجیএসকে শান্তিতে বিশ্রাম দেওয়া

— ক্যানব্যাক্স

Answer 7

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

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 সমর্থন করে (অন্যথায় এটি একটি গড় অক্ষরের প্রস্থ অনুমান করে)। ভাগ্যক্রমে, প্রস্থটি মূলত ফন্টের আকারের সাথে লিনিয়ার স্কেল করে, তাই এটি কোনও ফন্টের আকারে বেশ ভালভাবে কাজ করে। এটি লক্ষণীয়ভাবে কার্নিং বা লিগাচার বা যে কোনও বিষয়ে সচেতনতার অভাব বোধ করছে।

"ক্যালিব্রেট" করতে আমি কেবলমাত্র প্রতিটি চরিত্রকে একটি এস জি জি তে চারকোড 126 (শক্তিশালী টিল্ড) পর্যন্ত উপস্থাপন করেছি এবং বাউন্ডিং বাক্সটি পেয়েছি এবং এই অ্যারেটিতে এটি সংরক্ষণ করেছি; আরও কোড এবং ব্যাখ্যা এবং ডেমো এখানে ।

Comments

এটি একটি স্মার্ট সমাধান, একটি দুর্দান্ত :) আমি সর্বদা একই ফন্ট / আকার ব্যবহার করি, তাই এটি আমার পক্ষে ভাল। আমি ডম / ক্যানভাস সমাধানগুলির কার্যকারিতাটি একটি বাস্তব সমস্যা পেয়েছি, এটি সত্যিই পরিষ্কার, চিয়ার্স!

— মাইকাপ্র4

ক্যানভাসের জন্য প্রয়োজনীয়তা দূর করে +1

— ফ্রেজে

আপনি * 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

এটি কোনও ডিওএম উপাদান তৈরি এবং এর জন্য সিএসএসের বৈশিষ্ট্য উল্লেখ করার চেয়ে অনেক বেশি ভারী ওজন নয় (2 ডি প্রসঙ্গ ইত্যাদি পাওয়া সহ) n't

— ফারাও 2 কে

আপনি যদি ইতিমধ্যে কোনও কিছুর জন্য ক্যানভাস ব্যবহার করে থাকেন তবে এটি একটি পরিষ্কার পদ্ধতি। তবে খুব কম। পরিমাপ পাঠের একা কলটি প্রায় 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 টি অক্ষর লুপিংয়ের পরিবর্তে বাইনারি অনুসন্ধানের চেষ্টা করুন: স্ট্যাকওভারফ্লো

— এ্যকশনস

@ স্ট্যানলিএইচ: ভাল ধারণা - আমি আপনার পরামর্শটি যত তাড়াতাড়ি সম্ভব বাস্তবায়ন করব।

— তেখেক

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

প্রস্থ এবং একটি টেক্সট heigth সঙ্গে প্রাপ্ত করা যাবে 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

আপনি যখন একটি সংখ্যা সেট করেন না, কারণ কোনও স্থানের প্রয়োজনীয়তা নেই, যদি আপনি এটি সরিয়ে ফেলেন তবে এটি দুর্দান্ত কাজ করবে: ফন্টসাইজ + "পিএক্স এরিয়াল" -> ফন্টসাইজ + "পিএক্স এরিয়াল", ঠিক এটি।

— আলবার্তো আকুয়া

Answer 19

কাজের উদাহরণের মূর্খতা : http://jsfiddle.net/tdpLdqpo/1/

এইচটিএমএল:

<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বৈশিষ্ট্য সীমান্ত বক্স বর্ণনা, পিক্সেলে, এর উপরে বাম আপেক্ষিক সঙ্গে ভিউপোর্ট উপরে বাম।

মজিলা কন্ট্রিবিউটরদের দ্বারা এলিমেন্ট.জেটস্লায়েন্টারেক্টস () সিসি-বিওয়াই-এসএ 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

আপনি পাঠ্য ক্লোনিং প্রযুক্তির চেয়ে ক্রিয়েটরেঞ্জের সাহায্যে এটি আরও সঠিকভাবে করতে পারেন:

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