1

我想计算 span 元素中给定文本的 px 宽度。我在 Stackoverflow 中检查了几个答案。但是对我没有任何作用:(。我想弄清楚我做错了什么。这是 jsFiddle链接。这里是代码：

    $.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 视图中可以清楚地看出，文本大小大于其容器。那么我的错误是什么？先感谢您。

PS如果您需要澄清，请留下评论。

编辑：我在其他问题中看到了@LeeTaylor 的类似答案。但是它并没有解决我的问题。因为在我的情况下，span 元素内的文本。但在您的情况下，div 内的文本。我无法将跨度的显示属性更改为阻止。所以就我而言，这不起作用。我尝试使用 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链接。

PS我会投票给你的答案作为对你答案的奖励。但是我不能接受其中之一。

4

2 回答 2

1

我使用这个实用功能：

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

于 2013-11-06T02:41:57.003 回答
1

你试过使用scrollWidth吗？

这可能会做你想做的事：http: //jsfiddle.net/eJMAD/

不过，scrollWidth 在所有浏览器中的工作方式可能并不相同，因此也许其他人有更好的解决方案，对跨浏览器更友好。

于 2013-11-06T02:16:03.050 回答