Question

说我有：

<div>Some variable amount of text.</div>

如何获得div中文本的宽度（以像素为单位）？

请记住，文本的数量会从div到div无法预测地变化。

谢谢！

Answer 1

听起来你想要内容的宽度，而不是其他人提供的div本身的宽度。我认为您需要将内容包装在一个范围内，以便您可以测量范围的宽度。 div总是尽可能宽。您需要折叠到可以测量的内容大小的内容。

Answer 2

我找到的最好方法是使用CSS规则"display:inline;"仅绑定给定HTML元素的textNode，然后使用offsetWidth JS方法。

<div style="display:inline;" id="gotWidthInPixels" >Some variable amount of text.</div>
<script>
  //either:
  var widthInPixels= $('#gotWidthInPixels')[0].offsetWidth; 
  //or
  var widthInPixels= document.getElementById("gotWidthInPixels").offsetWidth;
</script>

这将为您提供任何HTML元素的精确像素宽度。

Answer 3

var w = $('div').width()

或使用div的任何其他选择器

Answer 4

只需使用width（）：

<div id="mydiv">text text text</div>
<script>
alert( $('#mydiv').width() );
</script>

Answer 5

关于@mrtsherman，如果你想要你可以使用的文字的宽度

var myDiv = $('#myDiv'); 

//div width
var textWidth = sb.width();

//remove padding and margin from left and right
textWidth -= parseInt(sb.css('padding-left') ) + parseInt(sb.css('margin-left') );
textWidth -= parseInt(sb.css('padding-right') ) + parseInt(sb.css('margin-right') );

Answer 6

我有一些奇怪的问题，其中空白空间在jquery中打破了宽度计算。不确定为什么，如果是因为字符串变量和连接，或JMVC框架，或只是jQuery。

但是，使空格不间断空格

&nbsp;

似乎解决了这个问题。只是把它扔掉那里以防它有帮助。

使用jQuery计算块级元素中文本节点的宽度

6 个答案: