如何使溢出的CSS属性与隐藏值一起工作

123

我很难过overflow: hidden。

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

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

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

无序列表是轮播，容器是列表。

下面是我的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>
css  overflow  html 
— 达伦
source
2
有什么反对给.list定身高的说法吗？我认为那会起作用。
— Pekka 2010年
2
@Pekka，我检查了一下。假设CSS规则（因为HTML张贴在这里不显示div.body和.container元素）
— 加布里埃尔Petrioli
1
那没用。如果列表溢出，则包装列表，而不是隐藏列表。
— 达伦（Darren）2010年
1
您如何<li>获得水平布局的？您是否想向我们展示一些CSS？这到底是为了什么？图像滑块？
— Moin Zaman 2010年
1
嗨，大家好，我不能使用水平菜单，因为浮动宽度或嵌入式显示总是由于父级宽度而溢出。我现在正在尝试一张桌子，但是那也很痛苦。
— 达伦（Darren）2010年

Answers:

397

好吧，如果有人遇到这个问题，这可能是您的答案：

如果要隐藏绝对定位的元素，请确保这些绝对定位的元素的容器是相对放置的。

— 达伦
source
1
对于容器中相对放置的内容，我也遇到类似的问题，并且也需要容器是相对的。因此，它不仅隐藏绝对定位的元素，还隐藏其外观的所有定位元素。:)
— 克里斯（Chris）
10
太好了-除了这是白痴。溢出：隐藏应该被隐藏。没有对文档的抽象引用，任何人都可以提供选择此路线与更有意义的路线的充分理由吗？
— user1873073
3
实际上，仅需要定位父元素，这意味着绝对和固定也是有效的。基本上不是静态的。
— 瑞安·詹金斯
1
很好的答案，也适用于我的情况。就我而言，具有overflow：hidden的div具有position：relative属性。添加位置：相对于其父对象解决了该问题。
— 阿努拉格2014年
74

其实...

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

— 卢南德莫
source
1
对于可能仍然遇到此问题的其他任何人：static据我所知，孩子必须处于同盟地位。设置position:relative为父母和孩子都无效。
— 艾文·万
6

除了提供的答案：

似乎父元素（带有的元素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>
展开摘要

— 米洛什·萨科诺维奇（MilošĐakonović）
source
1
抱歉，这没有道理，您如何设法内联溢出？同样的文档也很清楚：developer.mozilla.org/en-US/docs/Web/CSS/overflow溢出仅适用于块容器
— Temani Afif
1
当然可以。尝试使位置绝对子元素具有负偏移。您可以通过默认元素如LIS和跨越作出这样的错误与在线
— 米洛什Đakonović
1
@TemaniAfif和MilošĐakonović..没错，这inline-block将是正确的，或者是任何其他类似于显示类型的块，尽管在这种情况下，当with元素overflow: hidden具有时float，它也可用于inline元素。
— 艾森
1
当您添加绝对位置时，该元素将成为块元素，因此此处不涉及任何内联
— Temani Afif
2
@LGSon然后让我们举个例子，但仍然与这个问题无关..应该适合另一个问题。
— Temani Afif
0

这对我有用

<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：适用于寻求动态截断文本的解决方案的任何人。

编辑：这本来是对这个问题的答案，但由于它们是相关的，它可以帮助解决这个问题，因此我也将其保留在此处，而不是将其删除。

— 尤尔帕莱
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.