如何使溢出 CSS 属性工作与隐藏作为值

我有一个艰难的时间与 overflow: hidden。

基本上，我试图隐藏位于 <div>中的无序列表的溢出。

我不知道为什么这样不行。

它不是隐藏它，而是将我的列表从水平布局分解为垂直布局。

无序列表是 carousel，容器是 list。

下面是我的 CSS 代码;

div.body .container .images {
background: url(/images/images-background.jpg);
height: 62px;
margin-bottom: 17px;
width: 384px;
}
div.body .container .images #images-previous {
cursor: pointer;
float: left;
}
div.body .container .images #images-next {
cursor: pointer;
float: left;
}
div.body .container .images .list {
float: left;
overflow: hidden;
vertical-align: top;
width: 336px;
}
div.body .container .images .carousel {
margin-bottom: 6px;
margin-top: 8px;
width: 336px;
}

在这里，我的 HTML;

<div class="images">
<div id="images-previous">
<img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
</div>
<div class="list">
<ul class="carousel">
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<li>
<img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
</li>
<!--
<cfset i=1>
<cfloop condition="i lte images.recordcount">
<cfoutput>
<li>
<img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
<img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
<img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
</li>
</cfoutput>
<cfset i=i+1>
</cfloop>
</cfset>
-->
</ul>
</div>
<div id="images-next">
<img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
</div>
<div class="clear"></div>
240947 次浏览
小开
最佳答案

好吧，如果其他人有这个问题，这可能是你的答案:

如果您试图隐藏绝对定位元素，请确保这些绝对定位元素的容器是相对定位的。

小开

其实..。

要隐藏绝对定位元素，容器 position必须是除 static以外的任何值。它可以是 relative或 fixed除了 absolute。

小开

除了提供的答案之外:

似乎母元素(有 overflow:hidden的那个) 不可以是 display:inline。改成 display:inline-block对我来说很有用。

.outer {
position: relative;
border: 1px dotted black;
padding: 5px;
overflow: hidden;
}
.inner {
position: absolute;
left: 50%;
margin-left: -20px;
top: 70%;
width: 40px;
height: 80px;
background: yellow;
}
<span class="outer">
Some text
<span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
Some text
<span class="inner"></span>
</span>

小开

显然，有时候，如果 也很强大也被设置为 overflow:hidden，那么含有不应该溢出的物质的元素的 父母 >/强 >的显示属性也应该被设置为 overflow:hidden，例如:

<div style="overflow: hidden">
<div style="overflow: hidden">some text that should not overflow<div>
</div>

为什么? 我不知道，但它为我工作。参见 https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565(忽略在堆栈溢出狙击!)

小开

这招对我很管用

<div style="display: flex; position: absolute; width: 100%;">
<div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
</div>
</div>

将 position:absolute添加到父容器使其工作。

PS: 这是为那些寻找动态截断文本解决方案的人准备的。

编辑: 这本来是一个答案的 这个问题，但因为他们是相关的，它可以帮助某人在这个问题，我也将留在这里，而不是删除它。

小开

我不明白。 我也有过类似的问题，但是在我的导航栏里。

我所做的就是用这种方式保存我的导航条码: nav>div.navlinks>ul>li*3>a

为了把悬停效果放在一个 I 位置的相对和设计的 a::before和 a::after，然后我把一个灰色的背景之前和之后的元素，并保持悬停效果，以这样的方式，当一个人在 <a>悬停，他们将弹出来，以填充 <a>。

问题是隐藏的溢出不能在 <a>上工作。

我发现，如果我删除 <li>和简单地把 <a>没有 <ul>和 <li>然后它工作。

有什么问题吗？

小开

也许你可以改用 auto 来使用级联的 de 继承属性

<section style="overflow: hidden">
<section style="overflow: auto">text within overflow<div>
</section>

通过这种方式，内部部分可以显示在父元素之外


提交答案