Question

我正在尝试创建一个将在$（'element'）上“增长”的大小调整容器。悬停，但我只想在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>

包含中文（普通话）的李太宽，无法放入172px宽的容器中。我想能够找到.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

编辑：我updated my example here符合您的新要求。翻转列表项以返回悬停项的宽度。

您必须将包含元素的宽度设置为auto，抓取宽度，然后将它们重置为172px。使用jQuery，这种情况发生得足够快，没有闪烁。

请参阅my example here。

Answer 2

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

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

两个很小的代码行，完全返回我需要的代码。谢谢大家的帮助。没有你们，我不会想到这一点。

Answer 3

您可以使用jquery获取渲染宽度：

$("#innerContainer").width()

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

3 个答案: