具有水平隱藏溢出的可變高度HTML元素CSS

Question

我需要隱藏html元素的水平溢出，但不是垂直溢出。因此，假設我有以下的HTML：

<div class="container"> 
    <div class="inner"> 
    <p>content 1</p> 
    </div> 
    <div class="inner"> 
    <p>content 2</p> 
    <p> and then some more stuff</p> 
    </div> 
</div> 

我想用CSS是這樣的：

.container{ 
    overflow:hidden; 
    width:100px; 
} 
.inner{ 
    width:200px; 
} 

我的問題是元素div.container將具有零高度，因爲我有未在CSS中定義高度。然而，容器中內容的高度可能是可變的，因此我不能設置特定的高度。

我可以使用JavaScript動態設置元素的高度，但我想避免這樣做。

Answer 1

由於沒有高度（它是一個變量），Y軸不會溢出，所以不需要它。容器只需擴展Y就可以滿足內容的要求，因此即使您使用overflow:visible;或overflow-y:visible;強制實現了溢出可見性，它也不會顯示滾動條。

如果你需要得到垂直型溢出你必須，至少，指定max-height:<value>.<units>; & overflow-y:auto; overflow-x:hidden;，所以，如果在Y軸上內容溢出，它會顯示一個滾動條。

Answer 2

也許你可以試用短片？我沒有經驗，所以你不得不嘗試。

.container 
    { 
    clip:rect(0px, 100px, auto, 0px); 
    } 

有溢出x和溢出y屬性，但只在CSS3。據我所知，FF已經正確地解釋了它們。