计算文字宽度

Question

我正在尝试使用jQuery计算文本宽度。我不确定是什么，但我肯定做错了什么。

所以，这是代码：

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

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

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

Answer 3

<强> My solution

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

Answer 4

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

Answer 5

答案中提供的textWidth函数接受string作为参数将不会考虑前导和尾随空格（这些空格不会在虚拟容器中呈现）。此外，如果文本包含任何html标记，它们将无法工作（子字符串<br>将不会产生任何输出， 将返回一个空格的长度。）

这只是接受textWidth的{​​{1}}函数的问题，因为如果给出了DOM元素，并且在元素上调用string，则可能没有需要为这种用例修复此问题。

但是，例如，如果您正在计算文本的宽度，以便在用户键入时动态修改文本.html()元素的宽度（我当前的用例），那么您可能希望替换前导并使用input尾随空格并将字符串编码为html。

我使用了philfreo的解决方案，所以这里有一个修复此问题的版本（附加评论）：

 

Answer 6

如果持有文本的元素具有固定宽度，Rune's和Brain's都不会为我工作。我做了类似于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;
};

Answer 7

我发现这个解决方案运行良好，它在调整大小之前继承了原始字体：

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

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的轻微更改，因为如果我们引用 h1 或 p 。因此，我们将使用.contents（），并使用 this 而不是$（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;
    };

Answer 11

追逐幽灵两天后，试图找出文本宽度不正确的原因，我意识到这是因为文本字符串中的空格会阻止宽度计算。

所以，另一个提示是检查空格是否导致问题。使用

 

不间断的空间，看看是否能解决问题。

人们建议的其他功能也很好，但是造成麻烦的是空白。

Answer 12

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

Answer 13

如果要确定给定元素中文本节点和元素混合的宽度，则需要使用wrapInner()包装所有内容，计算宽度，然后打开内容。

*注意：您还需要扩展jQuery以添加unwrapInner（）函数，因为默认情况下不提供它。

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

Answer 14

调用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只传递样式的字体细节。

Answer 15

我修改了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（）不会返回我需要的文本节点。我还发现返回的宽度受到视口宽度的影响，导致包装所以我使用的是white-space：nowrap;无论视口宽度如何，都能获得正确的宽度。

Answer 16

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

我无法让列出的任何解决方案100％正常工作，所以基于@chmurson（后者又基于@Okamera）的想法以及来自@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);

说明：

jQuery扩展方法中的
• this已经是一个jQuery对象，因此不需要许多示例中的所有额外$(this)。
• 它只将虚拟元素添加到主体一次，然后重复使用它。
• 您还应指定white-space: nowrap，以确保它将作为单行进行测量（而不是基于其他页面样式的换行）。
• 我无法单独使用font使其工作，并且还必须明确复制font-size。尚不确定为什么（仍在调查中）。
• 此不支持@philfreo方式的输入字段。

Answer 18

有时您还需要另外测量高度，而不仅仅是文字，还需要 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 19

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

Answer 20

不同父母的文字宽度可能不同，例如，如果你在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

我在处理@ 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

Answer 22

我认为你应该使用$('.calltoaction').val;

另外，我会使用id（＃）而不是类...如果你有多个这样的类，它将如何处理它？<​​/ p>