javascript - 我们如何计算任何文本的宽度

Question

我在 div 中有一个文本。我可以输出div的宽度如下

alert($("div").width());

但我有兴趣获取其中文本的宽度，不包括边框或填充空间。如果我指定font-family为 arial 或 verdana，那么文本占用的空间会有所不同。所以我想知道文本的宽度如何。

谢谢

Answer 1

我在文本周围设置了一个 span 元素，并得到了我想要的。

这是代码 -

http://jsbin.com/oduvan/edit#javascript,html

Answer 2

演示

使用innerWidth()和减去填充

 alert($("div").innerWidth()-($("div").css("padding").replace("px","")*2));

Answer 3

    <div id="div">Some text here</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var div2 = $('#div').clone();
        div2.addClass('for-calc');
        $('body').append(div2);
        $('.for-calc').html('<span style="display:inline; padding:0">' + $('.for-calc').html() + '</span>');
        var width = $('.for-calc > span').width();
        $('.for-calc').remove();
        alert(width);
    });
</script>

可变宽度包含来自 div#div 的文本宽度