我需要剪辑或隐藏溢出它的内容，但仅限于一侧

Posted 2023-02-25

【中文标题】我需要剪辑或隐藏溢出它的内容，但仅限于一侧

【英文标题】：I need to clip or hide content that overflows it parent, but only on one side

【发布时间】：2012-10-13 16:02:37

【问题描述】：

我有一个带有单个子 DIV 的 DIV，它可能会或可能不会在其父级的多个侧溢出。我需要能够隐藏溢出父级底部边缘的子级的任何部分，但允许在所有其他侧溢出。

这里有一张图来帮助解释：

我一直在查看clip CSS 属性，但未能成功提交，主要是因为它不接受百分比，而且这个子元素没有静态高度/宽度。此外，当将鼠标悬停在父级上时，子级将进行动画处理，从一个位置移动到另一个位置。让事情变得有点棘手。

建议？

注意 我的目标是不为样式目的添加无关的标记。这个特定的网站在语义层面上必须是可靠的，因为它适用于一所大型学校，因此添加额外的包装 div 来实现这一点并不理想。

【问题讨论】：

您对使用 javascript 的可能性持开放态度吗？

【参考方案1】：

如果您可以多使用一个父 div，我可以使用以下方法获得类似的结果。

CSS：

    #grandparent
        overflow: hidden
    
    #parent 
        background-color: #600;
        width: 200px;
        height: 200px;
        padding-top: 30px;
        text-align: center;
        margin: 0 auto;
        position: relative
    
    #child 
        background-color: #090;
        width: 100%;
        height: 300px;
        margin: 0 auto;
        position: absolute;
        padding: 0 1.5em;
        margin-left: -1.5em;
    

标记：

    <div id="grandparent">
      <div id="parent">
         <div id="child">Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum Lorem possum</div>
      </div>
    </div>

【讨论】：

感谢您的建议。我的目标是不为样式目的添加无关的标记。这个特定的站点在语义层面上必须是可靠的，因为它适用于一所大型学校。我会在我的原始帖子中添加一个注释。再次感谢！