具有水平隐藏溢出的可变高度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已经正确地解释了它们。