在Javascript中查找文本的宽度[重复]

Posted 2023-03-06

【中文标题】在Javascript中查找文本的宽度[重复]

【英文标题】：Finding width of text in Javascript [duplicate]

【发布时间】：2011-07-07 16:11:42

【问题描述】：

有没有办法在 javascript（使用 jQuery，很高兴利用它们提供的任何功能）中找到隐藏元素的文本宽度？

我想要一个节点图。每个节点内部都有文本，我希望节点的宽度可以容纳文本达到限制。所以我基本上创建了隐藏的<div>，里面有一些html。然后我使用 jQuery 在图表的正确位置显示那些<div>。提前知道正确的宽度很重要，这样我才能正确构建图表。

更新：为了澄清，我需要知道隐藏时某些文本的宽度。 Blender在下面给出了答案，我希望有一个不那么棘手的方法？

【问题讨论】：

“文本宽度”是什么意思？你的意思是一个字符串中有多少个字符，或者一个控件的宽度？

有一个 CSS "max-width" 样式属性，你知道...

（当然，它并不适用于所有浏览器。）

这就是为什么我不会真正推荐它。

@at - 你的问题确实是，“给定一串文本，我如何计算浏览器呈现时它的宽度是多少像素？”对吗？

【参考方案1】：

您可以使用类似搅拌机的方法，但使用可见性 css 属性而不是显示。可见性：隐藏；保持元素的位置，但只是使其不可见。

【参考方案2】：

你的意思是什么宽度？如果您指的是<div> 元素的宽度，那么有一个方便的函数可以满足您的需要。玩其中的一些：

$('#foo').width();
$('#foo').innerWidth();
$('#foo').outerWidth();

---

至于找到一个隐藏元素的width，我通常会这样做：

var zIndex = $('#foo').css('z-index');

$('#foo').css('z-index', '-10');
$('#foo').css('position', 'absolute');
$('#foo').css('display', 'block');

var fooWidth = $('#foo').width();

$('#foo').css('display', 'none');
$('#foo').css('z-index', zIndex);

不过一定有更简单的方法...

【参考方案3】：

只需为此提供一个非 JQuery 答案。假设我有一个 id 为 myworkerdiv 的工作 div，并且我已经将我的文本放入其中。

var myDiv document.getElementById('myworkerdiv'),
width = myDiv.clientWidth || myDiv.scrollWidth;

如果包含在内，您也可以找出高度 (clientHeight || scrollHeight)。

【参考方案4】：

您可以将div的样式设置为不换行white-space:nowrap（因此，文本在一行中）然后获取每个div的宽度，如果超过限制，将其设置为限制并设置样式允许文本换行 `white-space:normal

【讨论】：

谁会反对这个？这是一个很好的答案。

好吧，你可以帮忙改一下 :D - 谢谢顺便说一句。

【参考方案5】：

$('#txt').width()

http://jsfiddle.net/Detect/jk97D/