Html 如何使溢出的 CSS 属性以 hidden 作为值工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3970455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the overflow CSS property work with hidden as value
提问by Darren
I am having a tough time with overflow: hidden.
我和overflow: hidden.
Basically, I am trying to hide the overflow of an unordered list which is located in a <div>.
基本上，我试图隐藏位于<div>.
I have no idea why this isn't working though.
我不知道为什么这不起作用。
Instead of hiding it, it breaks my list from a horizontal layout to a vertical layout.
它没有隐藏它，而是将我的列表从水平布局分解为垂直布局。
The unordered list is carousel and the container is list.
无序列表是carousel，容器是list。
Below is my CSS code;
下面是我的 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;
}
Here, my HTML;
在这里，我的 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>
回答by Darren
Ok if anyone else is having this problem this may be your answer:
好的，如果其他人遇到此问题，这可能是您的答案：
If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.
如果您试图隐藏绝对定位元素，请确保这些绝对定位元素的容器是相对定位的。
回答by rw-nandemo
Actually...
实际上...
To hide an absolute positioned element, the container positionmust be anything except for static. It can be relativeor fixedin addition to absolute.
要隐藏绝对定位元素，容器position必须是除static. 它可以是relative或fixed除此之外absolute。
回答by Milo? ?akonovi?
In addition to provided answers:
除了提供的答案：
it seems like parent element (the one with overflow:hidden) must notbe display:inline. Changing to display:inline-blockworked for me.
似乎父元素（带有 的那个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>回答by Charles Goodwin
Evidently, sometimes, the display properties of parentof the element containing the matter that shouldn't over should alsobe set to overflow:hiddenas well, e.g.:
显然，有时，包含不应结束的内容的元素的父元素的显示属性也应该设置overflow:hidden为，例如：
<div style="overflow: hidden">
<div style="overflow: hidden">some text that should not overflow<div>
</div>
Why? I have no idea but it worked for me. See https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565(ignore the sniping at stackoverflow!)
为什么？我不知道，但它对我有用。请参阅https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565（忽略 stackoverflow 的狙击！）
回答by YulePale
This worked for me
这对我有用
<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>
Adding position:absoluteto the parent container made it work.
添加position:absolute到父容器使其工作。
PS: This is for anyone looking for a solution to dynamically truncating text.
PS：这适用于任何正在寻找动态截断文本的解决方案的人。
EDIT: This was meant to be an answer for this questionbut since they are related and it could help someone on this question I shall also leave it here instead of deleting it.
编辑：这是对这个问题的回答，但由于它们是相关的，它可以帮助解决这个问题的人，我也将把它留在这里而不是删除它。
