Question

我想计算span元素中给定文本的px宽度。我在Stackoverflow中检查了几个答案。然而，没有什么对我有用:(。我想弄明白我做错了什么。这是jsFiddle link。这里是代码：

    $.fn.textWidth = function(){
      var html_org = $(this).html();
      var html_calc = '<span>' + html_org + '</span>';
      $(html_calc).css('font-size', this.css('font-size'));
      $(this).html(html_calc);
      var width = $(this).find('span:first').width();
      $(this).html(html_org);
      return width;
    };

    var ts_name = $('span#ts_name');
    var ts_name_text=ts_name.text().trim();
    var ts_name_p_box_width = $('div#container-testset-name').innerWidth()-100;
    var text_width = $(ts_name).textWidth();

text_p_box_width的结果是737px，text_width是715px。但是从Chrome浏览器的html视图中可以清楚地看到文本大小比其容器大。那我的错是什么？提前谢谢。

P.S。如果您需要澄清，请留下评论。

编辑：我在其他问题上看到了@LeeTaylor的类似答案。但它并没有解决我的问题。因为在我的情况下文本在span元素里面。但在你的案例文本div里面。我无法将span的display属性更改为阻止。所以对于我的情况，这不起作用。我尝试使用jQuery动态生成两个元素并尝试获取宽度。但它是0.我发现，由于这个动态创建的对象不包含在DOM树中，而CSS未应用它将起作用。

`var ts_name=$('span#ts_name').text().trim();

        var text_container = $(document.createElement('span')).html(ts_name).attr('id', 'input_text');
        var block_container = $(document.createElement('div')).html(text_container).css({display:'block'});
        block_container.css({width: '3000px'});

        console.log($(block_container).find('span#input_text').width());
        console.log($(block_container).find('span#input_text').outerWidth());
        console.log($(block_container).find('span#input_text').innerWidth());

我之所以这样做是因为我想使用您的解决方案，但它不起作用。你对此有什么想法吗？

解决方案：我弄清楚为什么我的代码无法正常工作我只需更改css中的一个值，如下所示：

div#ts_designer>div#container-testset-name.c-group-inner-row span#ts_name 
{
    position: absolute;
    left: 100px;
    right: 0;
    top: 0px;
    bottom: 0;
    width: auto!important;
    white-space: nowrap; /*This line added*/ 
}

这是更新的jsFiddle link。

P.S。我会把你的答案投票给你答案。但是我无法接受其中一个。

Answer 1

您是否尝试过使用scrollWidth？

这可能符合您的要求：http://jsfiddle.net/eJMAD/

但是，在所有浏览器中，scrollWidth可能无法正常工作，因此也许其他人拥有更好的跨浏览器友好解决方案。

Answer 2

我使用这个效用函数：

HTML：

<div>hello this is a test</div>

jQuery的：

$.fn.textWidth = function()
{
    var old = $(this).html();
    $(this).html( $("<span>").html( $(this).html() ) );
    var width = $(this).find("span:first").width();
    $(this).html(old);
    return width;
};

alert("Width of the text in the div = " + $("div").textWidth());

jsfiddle

计算给定字符串的真实像素宽度

2 个答案: