有一個容器適合它的一個孩子的寬度，另一個孩子使用文本溢出

我正在尋找一種方法來使HTML容器適合其子之一的寬度。有一個容器適合它的一個孩子的寬度，另一個孩子使用文本溢出

好的我知道，這是它的設計原理。

但是！我還需要另一個孩子以「文本溢出：省略號」摺疊。問題是：要應用這樣的屬性，需要這個孩子處於「display：block」模式，這使得它擴大了容器的寬度。

有什麼祕密時間來實現我在找的東西。

這裏是一個JsFiddle萬一你沒有得到它或想試一試。

編輯：順便說一下，這一點很重要，我專門正如沃森說靶向的Internet Explorer 10

來源

2012-07-16 user1174017

你可以只顯示：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覆蓋它，如果可以的話。

來源

2012-07-16 20:49:17 miyasudokoro

有一個容器適合它的一個孩子的寬度，另一個孩子使用文本溢出

回答

相關問題