Question

我正在寻找一种方法让HTML容器适合其中一个子容器的宽度。

好的我知道，这就是设计已经有效的方法。

但是！我还需要另一个孩子以“文本溢出：省略号”崩溃。问题是：要应用这样的属性，你需要这个子节点处于“display：block”模式，这样可以扩大容器的宽度。

是否有任何秘密时间来实现我正在寻找的目标。

以下是JsFiddle，如果你没有得到它或想试一试。

编辑：顺便说一句，这很重要，我的目标是特定的Internet Explorer 10。

Answer 1

正如沃森所说，没有“收缩适合”的CSS规则。所以，你有两个选择：

手动和静态设置.overflow元素的大小。所以，而不是宽度：100％，你把宽度：330px。
使用javascript动态调整.overflow元素的大小。（我假设你有不止一个。）你说你想缩小到最大的内部div。假设您有几个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覆盖它，如果可以的话。

容器适合其中一个子容器的宽度，另一个容器使用文本溢出

1 个答案: