Question

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

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

但我感兴趣的是获取其中的文本宽度，不包括边框或填充空间。如果我将font-family指定为arial或verdana，则文本占用的空间将不同。所以我想知道文本的宽度是多少。

由于

Answer 1

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

这是代码 -

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

Answer 2

DEMO

使用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

中文本的宽度

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

3 个答案: