css - 让容器适合其一个孩子的宽度，另一个孩子使用 text-overflow

Question

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

好的，我知道，这就是它的设计方式。

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

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

这是一个JsFiddle，以防你不明白或想试一试。

编辑：顺便说一句，这很重要，我专门针对 Internet Explorer 10。

Answer 1

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

1. 手动和静态设置 .overflow 元素的大小。所以，不是宽度：100%，而是宽度：330px。

2. 使用 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 覆盖它（如果可以）。