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

发布于 2024-10-22 07:07:21 字数 171 浏览 6 评论 0原文

假设我有：

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

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

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

谢谢！

原文

Say I have:

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

How can I get the width (in pixels) of the text in the div?

Keep in mind that the amount of text will vary unpredictably from div to div.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜警司 2024-10-29 07:07:21

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

回复收藏 0 原文

诗化ㄋ丶相逢 2024-10-29 07:07:21

我发现最好的方法是使用 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 元素的精确宽度（以像素为单位）。

The best way I found is to use CSS rule "display:inline;" to bound only textNode of given HTML Element, then use offsetWidth JS method.

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

This will give you exact width in pixels of any HTML Element.

回复收藏 0 原文

旧时光的容颜 2024-10-29 07:07:21

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

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

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

or use any other selector for the div

回复收藏 0 原文

岁月静好 2024-10-29 07:07:21

只需像这样使用 width() 即可：

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

Just use width() like so:

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

回复收藏 0 原文

一萌ing 2024-10-29 07:07:21

关于@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') );

with regards to @mrtsherman if you want the width of just the text you could use

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') );

回复收藏 0 原文

何以心动 2024-10-29 07:07:21

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

但是，使空间成为不间断空间

似乎可以解决这个问题。只是把它扔出去以防有帮助。

i had some weird issues where whitespace spaces where breaking the width calculation in jquery. not sure exactly why, if it was because of string variables and concatenation, or the JMVC framework, or just jQuery.

But, making the spaces non-breaking spaces

seemed to solve it. just throwing that out there in case it helps.

回复收藏 0 原文

~没有更多了~