有一个容器适合它的一个孩子的宽度，另一个孩子使用文本溢出

问题描述：

我正在寻找一种方法来使HTML容器适合其子之一的宽度。有一个容器适合它的一个孩子的宽度，另一个孩子使用文本溢出

好的我知道，这是它的设计原理。

但是！我还需要另一个孩子以“文本溢出：省略号”折叠。问题是：要应用这样的属性，需要这个孩子处于“display：block”模式，这使得它扩大了容器的宽度。

有什么秘密时间来实现我在找的东西。

这里是一个JsFiddle万一你没有得到它或想试一试。

编辑：顺便说一下，这一点很重要，我专门正如沃森说靶向的Internet Explorer 10

你可以只显示：inline;在那些文字短的地方？ – dezman 2012-07-16 18:20:39

它不会有任何区别。我需要容器来适应这些。 – user1174017 2012-07-16 18:27:19

多数民众赞成什么显示：内联;确实。或者你想容器缩小到最小的div，因为这不会发生没有JavaScript。 – dezman 2012-07-16 18:28:08

答

，没有“收缩到合适” CSS规则。因此，您有两种选择：

手动和静态设置.overflow元素的大小。所以，而不是宽度：100％，你把宽度：330px。
使用javascript来动态调整.overflow元素的大小。（我假设你有多个）。你说你想缩小到最大的内部股利。假设你有几个div可能想要缩小，但是你想缩小到最大的div。首先，它们都设置为一类这样的：
```
.good-width{ 
    border: solid 2px salmon; 
    width:auto; /* necessary for some browsers' offsetWidth */ 
    display:inline-block; /* gives it the width of the contents */ 
} 
```

，你把JavaScript的这样的事情在页面的顶部：

var goods = document.getElementsByClassName('good-width'); 
//collect the widest one's width 
var maxwidth = 0; 
for(var x = 0; x < goods.length; x++) { 
    if(goods[x].offsetWidth > maxwidth) { 
     maxwidth = goods[x].offsetWidth; 
    } 
} 
//set the width of the overflow divs to match 
var overflows = document.getElementsByClassName('overflow'); 
for(var y = 0; y < overflows.length; y++) { 
    overflows[y].style.width = maxwidth + 'px'; 
}

如果我误解，你”再试图匹配特定的溢出特定好宽度，你应该分配给每个元素的ID和做的事情，道：

document.getElementById('overflowID').style.width = document.getElementById('good-widthID').offsetWidth + 'px';

如果这是我的网站，我实际上将＃1和＃2结合起来，以便让那些没有javascript的人看起来至少体面。也就是说，你为溢出的东西设置一个静态宽度，然后允许javascript覆盖它，如果可以的话。

有一个容器适合它的一个孩子的宽度，另一个孩子使用文本溢出

相关推荐