javascript - 试图找到隐藏内容的宽度以调整包含 div 的大小以显示内容(jQuery)

Question

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

<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 您可以看到菜单中太宽的行如何溢出到下一行。我通过使用 overflow:hidden 杀死了它。现在我需要找到隐藏文本行的宽度。

提前感谢您的任何回复。

Answer 1

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

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

两行甜蜜的小代码，返回我所需要的。谢谢大家的帮助。如果没有你们，我无法解决这个问题。