尝试找到隐藏内容的宽度，以调整包含div的大小以显示内容（jQuery） [英] Trying to find the width of hidden content in order to resize the containing div to show the content (jQuery)

问题描述

我试图创建一个调整大小的容器，将增长$（'元素'）。hover，但我只想这样做，当LI的内容是宽和隐藏，由于css overlow：隐。我似乎找不到一种方法来找到隐藏的内容的全部。例如：

 < ul id =innerContainer> 
< li>< a href =/ Afrikaans / index.html>南非荷兰语< / a>< / li> 
< li>< a href =/ Arabic / index.html>阿拉伯语< / a>< / li> 
< li>< a href =/中文/ index.html>中文（普通话）What's Its Just Crazy< / a>< / li& 
< / ul> 
  

包含中文（普通话）的li太宽，无法容纳172px宽的容器。
我想要能够找到.hover（）的宽度，所以我可以调整容器的大小来适应。我需要它是动态的，因为太宽的li不会总是conatin相同的内容。 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;颜色：＃000; font-weight：bold; text-decoration：none; text-indent：5px; border-bottom：1px solid＃000;} 
  

我可以得到的是实际的宽度， 。

请注意，这些项目已经在可垂直滚动的容器中。
此操作的一个示例是 http://www.pronunciator.com/越南语/index.html
您可以看到菜单中太宽的行溢出到下一行。我杀死了通过使用overflow：hidden。现在我需要找到隐藏文本行的宽度。

先感谢任何回复。

解决方案

Ok。我去了一个不同的解决方案，简化了一个事实，在生产版本中，我有很多外部div，结束了neeind设置为自动宽度遵循上述建议。相反，我创建了一个div，绝对定位的页面，具有相同的字体大小，重量和家庭设置作为锚点链接在李的。在悬停我填充隐藏的div，其宽度设置为自动与$（这）.html（）的内容，然后我调用.width（）隐藏的div（#test）。它看起来像这样：

  $（'＃test'）。html（$（this）.html 
 var new_width = $（'＃test'）。width（）; 
  

两个甜蜜的小代码，返回我所需要的。感谢大家的帮助。我没有想到这一点没有你们。

I am trying to create a resizing container that will "grow" on $('element').hover, but I only want to do so when the content in the LI is to wide and hidden due to a css overlow:hidden. I can't seem to find a way to find the total widht of the hidden content. For example:

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

The li containing the Chinese (Mandarin)... is too wide to fit in the 172px wide container. I want to be able to find out the width on .hover() so I can resize the container to fit. I need it to be dynamic because the li that is too wide will not always conatin the same content. CSS is :

#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;}

All i can get is the actual width which is 172px.

Take into consideration that the items are already in a vertically scrollable container. An example of this in action is at http://www.pronunciator.com/Vietnamese/index.html You can see how the rows in the menu that are too wide overflow into the next line. I killed that by using overflow:hidden. Now i need to find the width of the line of hidden text.

Thanks in advance for any replies.

解决方案

Ok..so i went with a little different solution that simplified the fact that in the production version of this I have many outer divs that end up neeind to be set to auto width in order to follow the suggestions above. Instead I created a div absolutely positioned off the page with the same font size, weight, and family settings as the anchor links in the LI's. On hover I fill the hidden div whos width is set to auto with the contents of $(this).html() and then I call .width() on the hidden div (#test). It looks like this:

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

two sweet little lines of code that return exactly what I need. Thanks everybody for your help. I wouldnt have figured this out without you guys.

这篇关于尝试找到隐藏内容的宽度，以调整包含div的大小以显示内容（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！