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

Calculate the true pixel width of a given string

本文关键字：像素 真实 字符串 计算      更新时间：2023-09-26

我想计算 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视图中可以清楚地看出，文本大小大于其容器。那么我的错误是什么？提前谢谢你。

附言如果您需要一些澄清，请留下评论。

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

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

你试过使用 scrollWidth 吗？

这可能会执行您希望它执行的操作：http://jsfiddle.net/eJMAD/

不过，scrollWidth 可能不会在所有浏览器上都以相同的方式工作，所以也许其他人有更好的解决方案，更适用于跨浏览器。

我使用这个实用程序函数：

.HTML：

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

j查询：

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

斯菲德尔

相关文章：