溢出的例外:隐藏; 属性

Question

如何才能在overflow:hidden;容器属性上对一组匹配的子元素进行异常处理？

这是一个示例场景:

<div style = "overflow:hidden;">
   <p>item</p>
   <p>item</p>
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

我确实有这样做的原因:]我正在构建一个非常复杂的滚动菜单,其元素正在扩展出菜单的边框.菜单显然会剪切其边界以外的所有内容,因为它在滚动.

以下是与该问题相关的一大块代码:http: //jsfiddle.net/Birowsky/fNLbP/15/

取消注释JavaScript中的标记行,以查看"特殊项目"下方的问题.您可能会注意到滚动不起作用,没关系,我认为这是小问题.

Answer 1

您可以使special元素绝对定位

.special{
 position:absolute;
}

但这仅在.special未定义位置(上/左/下/右)时才有效,如果您以后想要计算父div的高度,也不会使用它.

示例: http ://jsfiddle.net/gaby/aT3We/

虽然这个要求有点奇怪,但重新考虑整个问题可能会更好.
(你究竟想用这个来实现什么？)

Answer 2

我认为你无法找到一种方法来做到这一点。即使您这样做，我也建议您不要使用它，因为它可能不会面向未来或非常跨浏览器兼容。

对于菜单，您最好将这些项目放在单独的 div 中。我需要在上下文中查看您的代码以推荐一种特定的处理方式，但是像这样对元素进行分层可能对您有用：

<div style = "overflow: hidden; width: 200px; height: 100px; margin: 0; padding: 0; background-color: #CCCCCC; z-index: 1;">
   <p>item</p>
   <p>item</p>
</div>
<div style = "overflow: visible; width: 200px; height: 100px; margin: -30px 0 0 0; padding: 0; z-index: 2;">
   <p class="special">item that needs to show itself outside the parent borders</p>
</div>

如果这不符合您的需求，也许您可​​以更好地描述菜单的结构，以便我们了解您的需求？也许您有示例链接吗？

根据新信息进行编辑

查看示例链接后，看起来您想要做的是水平剪辑内容，同时仍然允许其垂直溢出。您可以通过使用非常高的高度值，然后设置负的底部边距来做到这一点：

<div style="width: 200px; height: 2000px; margin: 0 0 -1960px 0; overflow: hidden;">
    <p>Thisisaverylongsentencedesignedtooverflowthewindowverticallysopleasepermitmetotypeitwithoutandspaces</p>
    Item 1<br />
    Item 2<br />
    Item 3<br />
    Item 4<br />
</div>

这是你想要的吗？