试图找到隐藏内容的宽度以调整包含 div 的大小以显示内容（jQuery）答案

【问题标题】：Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)试图找到隐藏内容的宽度以调整包含 div 的大小以显示内容（jQuery）
【发布时间】：2011-01-21 01:15:29
【问题描述】：

我正在尝试创建一个将在 $('element').hover 上“增长”的大小调整容器，但我只想在 LI 中的内容由于 css 过低而变宽和隐藏时这样做：隐。我似乎无法找到一种方法来找到隐藏内容的总宽度。例如：

<ul id="innerContainer">
<li><a href="/Afrikaans/index.html">Afrikaans</a></li>
    <li><a href="/Arabic/index.html">Arabic</a></li>
    <li><a href="/Chinese/index.html">Chinese (Mandarin) What The Its Just Crazy</a></li>
</ul>

包含中文（普通话）...的 li 太宽，无法放入 172 像素宽的容器中。我希望能够找出 .hover() 上的宽度，以便调整容器的大小以适应。我需要它是动态的，因为太宽的 li 并不总是包含相同的内容。 CSS是：

#innerContainer {position:absolute; left:0; top:0; height:200px; overflow:hidden;}
#scroller ul {margin:0; padding:0; list-style:none;width:172px;}
#scroller ul li {float:left; height:27px; width:172px;}
#scroller ul li a {overflow:hidden;display:block; float:left; height:26px; line-height:26px; width:172px; font-size:11px; color:#000; font-weight:bold; text-decoration:none; text-indent:5px; border-bottom:1px solid #000;}

我能得到的只是172px的实际宽度。

考虑到项目已经在一个可垂直滚动的容器中。这方面的一个例子是http://www.pronunciator.com/Vietnamese/index.html 您可以看到菜单中太宽的行如何溢出到下一行。我通过使用溢出杀死了它：隐藏。现在我需要找到隐藏文本行的宽度。

提前感谢您的任何回复。

【问题讨论】：

您是否在
当我尝试这个时： $('ul#innerContainer li').hover(function(){ $('#test').html($(this).html() + ' ： ' + $(this).eq(2).width()); },function(){ $('#test').html('OUT'); });它返回 null 作为宽度。我使用 (this) 所以我可以得到所选 LI 的宽度。我将值返回到带有 id 测试的页面上的空 div。

标签： javascript jquery html css

【解决方案1】：

好的..所以我采用了一些不同的解决方案，简化了这样一个事实，即在生产版本中，我有许多外部 div 最终需要设置为自动宽度，以便遵循上述建议。相反，我创建了一个绝对位于页面外的 div，其字体大小、粗细和系列设置与 LI 中的锚链接相同。在悬停时，我使用 $(this).html() 的内容填充宽度设置为 auto 的隐藏 div，然后在隐藏 div (#test) 上调用 .width()。它看起来像这样：

$('#test').html($(this).html());
var new_width = $('#test').width();

两行可爱的小代码可以准确地返回我需要的内容。谢谢大家的帮助。如果没有你们，我不会想到这一点。

【讨论】：

【解决方案2】：

编辑：我已经updated my example here 来满足您的新要求。滚动列表项以返回悬停项的宽度。

您必须将包含元素的宽度设置为自动，获取宽度，然后将它们重置为 172 像素。使用 jQuery 时，这种情况发生得足够快，不会出现闪烁。

见my example here。

【讨论】：

好的，这是正确的方向，除了我需要找到实际悬停的 li 的宽度。你的例子只是抓住了最大的。在现实世界中，有许多溢出但宽度不同。
我已经用满足您新要求的新小提琴更新了我的答案。不过，我很高兴在我为您的项目工作后您自己想通了。
感谢您的反馈，我从您的帮助中学到了很多。由于您的帮助，我还发现了 JSFiddle。这是我一定会使用的工具。谢谢。

【解决方案3】：

你可以用jquery获取渲染的宽度：

$("#innerContainer").width()

【讨论】：