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

【问题标题】：Calculate width of text node in a block level element using jQuery使用jQuery计算块级元素中文本节点的宽度
【发布时间】：2011-07-16 04:08:49
【问题描述】：

说我有：

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

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

请记住，每个 div 的文本数量会发生不可预测的变化。

谢谢！

【问题讨论】：

你想要达到什么样的效果需要知道像素宽度？很多时候，这些情况都有一个不需要实际像素值的解决方案……

标签： jquery width textnode

【解决方案1】：

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

【讨论】：

谢谢@mrtsherman，这也是我开始认为我需要走的方向。

【解决方案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 元素的精确宽度（以像素为单位）。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

像这样使用 width()：

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

【讨论】：

【解决方案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') );

【讨论】：

【解决方案6】：

我遇到了一些奇怪的问题，即空格打破了 jquery 中的宽度计算。不知道到底是什么原因，如果是因为字符串变量和连接，或者 JMVC 框架，或者只是 jQuery。

但是，使空格成为非中断空格

&nbsp;

似乎解决了。只是把它扔在那里以防万一。

【讨论】：