计算文字宽度

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

我的解决方案

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

textWidth答案中提供的函数和接受a 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();
};

Answer 5

当尝试通过不一致的盒子模型确定文本宽度时,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 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;
}

Answer 7

如果持有文本的元素具有固定宽度,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;
};

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

如果你想先抓住文字