การคำนวณความกว้างของข้อความ

ฉันพยายามคำนวณความกว้างของข้อความโดยใช้ jQuery ฉันไม่แน่ใจว่าอะไร แต่ฉันทำอะไรผิดแน่ ๆ

ดังนั้นนี่คือรหัส:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

สิ่งนี้ใช้ได้ดีกว่าสำหรับฉัน:

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

นี่คือฟังก์ชั่นที่ดีกว่าที่โพสต์ไว้เพราะ

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

ทางออกของฉัน

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

โดยพื้นฐานแล้วการปรับปรุงของ Rune ซึ่งไม่ได้ใช้งาน.htmlเบา ๆ

textWidthฟังก์ชั่นที่ระบุไว้ในคำตอบและที่ยอมรับstringเป็นอาร์กิวเมนต์จะไม่บัญชีสำหรับชั้นนำและช่องว่างต่อท้ายสีขาว (เหล่านี้จะไม่แสดงผลในภาชนะหุ่น) นอกจากนี้จะไม่ทำงานหากข้อความมีมาร์กอัป html (สตริงย่อย<br>จะไม่สร้างเอาต์พุตใด ๆ และ จะคืนค่าความยาวของช่องว่างเดียว)

นี่เป็นเพียงปัญหาสำหรับtextWidthฟังก์ชันที่ยอมรับ a stringเนื่องจากหากมีการกำหนดองค์ประกอบ DOM และ.html()ถูกเรียกใช้ตามองค์ประกอบนั้นอาจไม่จำเป็นต้องแก้ไขปัญหานี้สำหรับกรณีการใช้งานดังกล่าว

แต่ตัวอย่างเช่นหากคุณกำลังคำนวณความกว้างของข้อความเพื่อปรับเปลี่ยนความกว้างของinputองค์ประกอบข้อความแบบไดนามิกตามประเภทผู้ใช้ (กรณีการใช้งานปัจจุบันของฉัน) คุณอาจต้องการแทนที่ช่องว่างนำหน้าและต่อท้ายด้วย และเข้ารหัสสตริง เป็น html

ฉันใช้โซลูชันของ philfreo ดังนั้นนี่คือเวอร์ชันที่แก้ไขปัญหานี้ (พร้อมความคิดเห็นเกี่ยวกับการเพิ่มเติม):

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

ฟังก์ชั่นความกว้างของ 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();

ฉันพบว่าโซลูชันนี้ใช้งานได้ดีและสืบทอดฟอนต์ต้นทางก่อนที่จะปรับขนาด:

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

ทั้ง Rune และ Brain ไม่ทำงานสำหรับฉันในกรณีที่องค์ประกอบที่ถือข้อความมีความกว้างคงที่ ฉันทำสิ่งที่คล้ายกับ Okamera ใช้ตัวเลือกน้อย

แก้ไข: อาจใช้ไม่ได้กับองค์ประกอบที่ใช้สัมพัทธ์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;
};

หากคุณพยายามทำสิ่งนี้กับข้อความในกล่องเลือกหรือหากทั้งสองไม่ได้ผลให้ลองใช้อันนี้แทน:

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

หากคุณต้องการจับข้อความก่อน

สิ่งนี้คุณทำผิดที่คุณเรียกใช้เมธอดบน cTxt ซึ่งเป็นสตริงธรรมดาไม่ใช่วัตถุ jQuery cTxt เป็นข้อความที่มีอยู่จริงๆ

การเปลี่ยนแปลงเล็กน้อยของนิโก้ตั้งแต่ .children () จะกลับเซตว่างถ้าเรากำลังอ้างอิงองค์ประกอบข้อความเช่นh1หรือพี ดังนั้นเราจะใช้ .contents () แทนและใช้สิ่งนี้แทน $ (this) เนื่องจากเรากำลังสร้างวิธีการบนวัตถุ 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;
    };

หลังจากไล่ผีมาสองวันพยายามหาสาเหตุที่ความกว้างของข้อความไม่ถูกต้องฉันรู้ว่าเป็นเพราะช่องว่างสีขาวในสตริงข้อความที่จะหยุดการคำนวณความกว้าง

ดังนั้นเคล็ดลับอีกประการหนึ่งคือการตรวจสอบว่าช่องว่างทำให้เกิดปัญหาหรือไม่ ใช้

 

พื้นที่ที่ไม่ทำลายและดูว่าสามารถแก้ไขได้หรือไม่

ฟังก์ชั่นอื่น ๆ ที่ผู้คนแนะนำก็ใช้ได้ดีเช่นกัน แต่เป็นช่องว่างที่ทำให้เกิดปัญหา

หากคุณกำลังพยายามกำหนดความกว้างของการผสมของโหนดข้อความและองค์ประกอบภายในองค์ประกอบที่กำหนดคุณต้องรวมเนื้อหาทั้งหมดด้วยwrapInner ()คำนวณความกว้างแล้วแกะเนื้อหาออก

* หมายเหตุ: คุณจะต้องขยาย jQuery เพื่อเพิ่มฟังก์ชัน uncrapInner () เนื่องจากไม่ได้ระบุไว้โดยค่าเริ่มต้น

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

ขยายคำตอบของ @ philfreo:

ฉันได้เพิ่มความสามารถในการตรวจสอบ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();
};

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

เรียก 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;
}

หมายเหตุ: - หากคุณต้องการให้. css แบบอินไลน์ส่งรายละเอียดแบบอักษรในรูปแบบเท่านั้น

ฉันแก้ไขรหัสของ 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 () ไม่ส่งคืนโหนดข้อความที่ฉันต้องการ ฉันยังพบว่าความกว้างที่ส่งคืนได้รับผลกระทบจากความกว้างของวิวพอร์ตซึ่งทำให้เกิดการห่อดังนั้นฉันจึงใช้ช่องว่าง: nowrap; เพื่อให้ได้ความกว้างที่ถูกต้องโดยไม่คำนึงถึงความกว้างของวิวพอร์ต

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

เกือบหนึ่งซับ ให้คุณมีอักขระตัวแรก

ฉันไม่สามารถหาวิธีแก้ปัญหาใด ๆ ที่ระบุว่าใช้งานได้ 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นี้

บางครั้งคุณต้องวัดความสูงเพิ่มเติมไม่ใช่เฉพาะข้อความแต่ต้องวัดความกว้าง 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()
  };
}

ความกว้างของข้อความอาจแตกต่างกันสำหรับผู้ปกครองที่แตกต่างกันเช่นถ้าคุณเพิ่มข้อความลงในแท็ก h1 มันจะกว้างกว่า div หรือ label ดังนั้นวิธีการแก้ปัญหาของฉันจึงเป็นดังนี้:

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

ฉันมีปัญหากับวิธีแก้ปัญหาเช่น @ rune-kaagaard สำหรับข้อความจำนวนมาก ฉันค้นพบสิ่งนี้:

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

ฉันคิดว่าคุณควรใช้ $('.calltoaction').val;

นอกจากนี้ฉันจะใช้ id (#) แทนคลาสสำหรับสิ่งนั้น .. ถ้าคุณมีมากกว่าหนึ่งคลาสที่จะจัดการกับมัน?