计算文字宽度_编程黑洞网

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

所以，这是代码：

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

那么，该代码以什么方式不起作用？它需要做些什么不同的事情？

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

+1-这确实可以测量文本，而不仅仅是brainreavis解决方案这样的包含块元素。

–本
2011-3-23在16:44

光滑+1。看起来您似乎在''之后的第三行缺少了半冒号，尽管这似乎没有什么区别（在FF9上使用或不使用它）。

– shmeeps
2012年1月12日18:33

不过要小心...此方法将取消绑定子元素上的任何事件。

– brianreavis
2012年2月3日在21:05

我试图以多种方式使用此函数，但它始终返回null。有人可以发布该函数实际使用方式的语法吗？我是否在jQuery对象上运行.textWidth（）函数？我是否将文本传递给此功能？我是否将函数作为jQuery函数运行（即$ .textWidth（jqObject）？），因为这些选项似乎都不起作用。谢谢...

–moosefetcher
2013年10月31日14:37

@moosefetcher你会做$（selector）.textWidth（）;看看这里learning.jquery.com/plugins/basic-plugin-creation/…

–uesports135
15年8月21日在16:48

#2 楼

此功能比其他发布的功能要好，因为

它更短
当传递<input>，<span>或"string"时它可以工作。
因为它可以更快地用于频繁使用重用现有的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();
};

哇！太棒了！

–米歇尔·特里亚纳（Michel Triana）
2014年2月19日在22:34

很好的解决方案，应该接受答案，我认为！谢谢，朋友！

– Ilia Rostovtsev
2014年5月8日18:32

幻想曲！简单干净。

– Carey Estes
2014年7月2日14:50

虽然很好，但是不能处理空格。有关此解决方案的增强，请参见@edsioufi的答案。

– Badgerspot
2014年9月24日在7:56

如果元素内有隐藏的文本，则它将扭曲您的宽度。为此，请确保在计算文本宽度之前先删除隐藏的节点。为了安全地删除隐藏的节点，您可能应该首先创建一个克隆并在那里进行删除。

– thdoan
2014年12月12日上午8:10

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

相对于Rune的基本改进，它不那么轻易地使用.html

作者：Ajarn Gerhard，他将其发布为答案：这在IE8中不起作用，因为您在标签的右括号之前缺少/：Calculator = $（''），

– Petr R.
13年8月17日在19:31

如果要测量的元素下面有子元素，则似乎返回null。可以在没有子元素的情况下使其正常工作吗？参见jsfiddle.net/h22tj/41

–凯斯
13年11月9日23:26

+1-我从不知道有一个unwrap（），这让我感到无尽的悲伤。

–嗜尿菌
2013年12月19日23:25

它在Chrome上始终返回null。

–emeraldhieu
2014年12月12日9:49

#4 楼

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

这仅是一个问题接受textWidth的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();
};

谢谢。您的答案最有价值。

– Vishal
14年8月23日在1:23

奇怪的是，当我尝试此操作时，它没有正确复制字体大小。我必须添加css（'font-size'），this.css（'font-size'））才能正常工作。有什么想法为什么仅字体不能复制该值？

–编码消失了
2015年9月2日14:03在

@GoneCoding您在哪里添加了这些额外功能？

–网络磁铁
18年2月5日在23:38

@webmagnets：与现有的.css方法相同的位置，但是我看到括号中的错误。应该是css（'font-size'，this.css（'font-size'））。

–编码消失了
18年2月18日在19:18

#5 楼

由于框模型不一致，在尝试确定文本宽度时，jQuery的width函数可能会有点阴暗。肯定的方法是将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();

这会不会给您块宽度而不是文本的宽度？

–乔什·里卡德（Josh Rickard）
2010年6月12日在16:59

-1这确实似乎是在测量框的宽度，而不是文本的宽度。

–内森·亚瑟（Nathan Arthur）
2011年10月31日21:43

不能简单地使用span而不是div来解决宽度问题？如果是这样，则此功能比接受的答案要好一些。

–乔什
13年4月18日在19:56

@Josh：如果将其替换为跨度，您将得到零。在H2上尝试了此解决方案，其中父元素隐藏了溢出，而我只得到了文本的截短长度。也许应该解释一下它应该如何工作才能使它更好地工作？

–编码消失了
2015年9月2日于13:32

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

我最终使用了它，但是添加了org.css（“ font-weight”）。另外，我会说if（！text）部分是不直观的。如果我使用例如jQuery（“＃someContainer”）。textWidth（“ Lorem ipsum”）在该特定容器中应用时，我想知道“ Lorem ipsum”的文本宽度。

–轻松地
2012年6月20日13:49

#7 楼

如果保存文本的元素具有固定的宽度，那么符文和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;
};

这对我来说是IE8支持的最佳解决方案，在此过程中不会破坏对元素的任何绑定！谢谢。

–ouija
15年1月12日在21:46

注意：在jQuery扩展方法中，这已经是jQuery对象，因此$（this）是多余的。

–编码消失了
2015年9月2日下午13:39

这对我来说是错误的，因为计算的宽度太小。接受的答案正常工作

– PandaWood
16年8月11日在13:31

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

如果您想先获取文字

#9 楼

事实是，您做错了，您正在cTxt上调用方法，这是一个简单的字符串而不是jQuery对象。 cTxt实际上是包含的文本。

#10 楼

对Nico稍作更改，因为如果我们引用的是h1或p之类的文本元素，则.children（）将返回一个空集。因此，我们将使用.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;
    };

#11 楼

在追赶幽灵两天后，试图弄清为什么文本的宽度不正确，我意识到是由于文本字符串中的空白导致宽度计算停止。

所以，另一个提示是检查空格是否引起了问题。使用

&nbsp;

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

人们建议的其他功能也能很好地工作，但是空格引起麻烦。

只是暂时在行内CSS中添加空白：nowrap即可避免这种情况。

–编码消失了
2015年9月2日于13:24

#12 楼

如果要确定给定元素内文本节点和元素混合的宽度，则需要使用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;
  }
});

为.wrapInner +1。如您所知，在jQuery中处理纯文本元素是一件很麻烦的事情。如果还有其他适用的jQuery方法，请告诉我。我不得不诉诸.get（0）.children，这并不漂亮。

–嗜尿菌
13年12月19日在23:28

#13 楼

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

#14 楼

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

#15 楼

调用getColumnWidth（）获取文本的with。

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仅以样式传递字体细节。

#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（）不会返回我所需的文本节点。我还发现返回的宽度受导致包裹的视口宽度的影响，因此我使用的是white-space：nowrap;。无论视口宽度如何，都可以获取正确的宽度。

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

几乎一个内衬。
给你第一个字符的

#18 楼

我无法列出所有可100％使用的解决方案，因此根据@chmurson（基于@Okamera）和@philfreo，也来自@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那样的输入字段。

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

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

#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

#22 楼

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

，我也将使用id（＃）代替该类。如果您有多个此类，它将如何处理？ />

是的，文档中不止一个。你为什么要建议身份证？

–Dom
09-10-17在16:35

编程黑洞网

计算文字宽度

评论