设置溢出：仅对某些元素隐藏

Question

http://jsfiddle.net/waitinforatrain/sEX3n/

我在一个具有绝对位置的容器中有两个 div。它们都设置在容器边界之外。如果我取消注释溢出：隐藏行，它将隐藏容器外部的所有内容。

但是，我只希望 div1 的溢出被隐藏，而 div2 的溢出可见。但是因为溢出：隐藏必须在父级中设置，所以它将隐藏它们。有什么办法可以隐藏一个吗？

即使我可以得到它，以便它在顶部和底部边界显示溢出，但在左侧和右侧不显示适合的溢出（我尝试弄乱溢出-x和溢出-y，但我认为这不是他们的预期目的）。

<div id="container"> 
    <div id="div1"></div> 
    <div id="div2">Test</div> 
</div> 

#container {
    width: 300px;
    position: relative;
    border: 1px solid #000;
    height: 10px;
    /*overflow: hidden;*/
}

#div2 {
    position: absolute;
    top: 16px;
    border: 1px solid #444;
}

#div1 {
    position: absolute;
    height: 10px;
    left: 90%;
    width: 15%;
    background-color: purple;
}

Answer 1

最明显的解决方案是：

• 添加额外的包装纸div。
• 适用overflow: hidden于此div。
• 将时间移到此之外div。

像这样： http: //jsfiddle.net/sEX3n/4/