时间戳

首页 > 解决方案 > 在没有容器的情况下强制溢出隐藏

html - 在没有容器的情况下强制溢出隐藏

问题描述

这是我的 HTML 和 CSS（基本原理）：

.tall-element:before {
        height: 2000px;
        position: absolute;
        bottom: 0;
        background-color: #000;
        width: 10px;
        display: block;
        content: " ";
    }
<ul>
    <li>
    </li>
    <li class="element-i-want-do-use-to-hide">
    </li>
    <li class="tall-element">
    </li>
</ul>

这（故意）创建了一条我希望能够设置overflow:hidden为.element-i-want-do-use-to-hide元素的线，但我不能完全做到这一点。

我可以设置overflow-y: hidden为<ul>and 这将导致线路中断，这是我正在寻找的效果，除了我想将该中断应用于相邻元素（在本例中为.element-i-want-do-use-to-hide元素）。

有人知道这样做的方法吗？

标签： htmlcss

解决方案

你的意思是这样吗？

.tall-element:before {
    height: 2000px;
    position: absolute;
    bottom: 0;
    background-color: #000;
    width: 10px;
    display: block;
    content: " ";
}

.element-i-want-do-use-to-hide {
  position: relative;
}

.element-i-want-do-use-to-hide:before {
    height: 2000px;
    position: absolute;
    z-index: 1;
    top: 0;
    background-color: #FFF;
    width: 10px;
    display: block;
    content: " ";
}
<ul>
    <li>
    </li>
    <li class="element-i-want-do-use-to-hide">
    </li>
    <li class="tall-element">
    </li>
</ul>

推荐阅读