我們如何計算任何文字的寬度

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