如何使overflow CSS属性与hidden as值一起工作

我在

溢出：隐藏
方面遇到了困难

基本上，我试图隐藏
中无序列表的溢出

我不知道为什么这不起作用

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

无序列表为转盘，容器为列表

下面是我的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>




















好的，如果其他人有此问题，这可能是您的答案：

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

要隐藏绝对定位元素，容器
位置
必须是除
静态
之外的任何内容。除了提供的答案之外，它还可以是相对的或固定的

它似乎是父元素（具有
溢出：隐藏的
）不能是
显示：内联的
。更改为
display:inline block
对我有效


.outer{
位置：相对位置；
边框：1px点黑色；
填充物：5px；
溢出：隐藏；
}
.内部{
位置：绝对位置；
左：50%；
左边距：-20px；
最高：70%；
宽度：40px；
高度：80px；
背景：黄色；
}

一些文本
一些文本
显然，有时，包含不应溢出物质的元素的父元素的显示属性也应设置为
溢出：隐藏
，例如：

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


一些不应溢出的文本

为什么?？我不知道，但它对我有用。请参阅（忽略对stackoverflow的狙击！）
这对我很有效

<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>


Lorem ipsum dolor sit amet，是一位杰出的献身者。整数nec odio。自由女神。这是一个直径较大的曲线。塞德·尼西。

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

PS：这适用于任何正在寻找动态截断文本解决方案的人

编辑：这本来是一个问题的答案，但由于它们是相关的，并且在这个问题上可以帮助某人，我也将把它留在这里，而不是删除它。
我没有得到它。
我有一个类似的问题，但在我的导航栏

我所做的是这样保存我的导航条形码：
nav>div.navlinks>ul>li*3>a

为了在a上放置悬停效果，我将a定位为相对并设计了
a:：before
和
a:：after
，然后我在前后元素上放置了灰色背景，并保持悬停效果，这样当一个人在
上悬停时，它们将从a外部弹出以填充

问题是隐藏的溢出在
上不起作用

我发现，如果我删除了
，简单地把
放在没有
和
的地方，那么它就起作用了

有什么问题吗？
有什么反对给
.list
一个固定高度的说法吗？“我想那会有用的。”佩卡，会的，我查过了。假设CSS规则适用（因为此处发布的HTML不显示
div.body
和
.container
元素），但这些规则不起作用。如果列表溢出，它会包装列表，而不是隐藏它。您的
是如何获得水平布局的？你错过给我们看一些CSS了吗？这到底是干什么用的？图像滑块？嗨，伙计们，原来我不能使用水平菜单，因为浮动或内联显示总是会溢出，因为父宽度。我现在正在尝试一个表，但这也是一个痛苦。我有一个类似的问题，在容器中相对定位的内容，需要容器也是相对的。因此，它不仅仅隐藏绝对定位的元素，它还隐藏任何定位的元素，就像它的外观一样。：）实际上，父元素只需要定位，这意味着绝对元素和固定元素也是有效的。基本上，任何不是静态的东西。很好的答案，也适用于我的场景。在我的例子中，带有overflow:hidden的div有一个position:relative属性。添加位置：相对于其父项修复了此问题。对于可能仍遇到此问题的任何其他人：据我所知，子项必须是
static
ally位置。将
position:relative
同时设置到父级和子级不起作用。很抱歉，这没有意义，您是如何设法使内联溢出的？文档也很清楚：溢出仅适用于块容器，请确保它有意义。尝试使用偏移量为负的绝对位置子元素。默认情况下，您可能会在使用内联元素（如LIs和）时犯这样的错误SPANs@TemaniAfif和米洛舍维奇。。这是正确的，
内联块
将显示，或任何其他类似块的显示类型，但在这种情况下，如果具有
溢出：隐藏
的元素具有
浮动
，它也适用于
内联
元素