I am having a tough time with overflow: hidden.
Basically, I am trying to hide the overflow of an unordered list which is located in a <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.
Below is my CSS code;
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;
<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>
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.
I did not get it. I had a similar problem but in my nav bar.
What I was doing is I kept my navBar code in this way: nav>div.navlinks>ul>li*3>a
In order to put hover effects on a I positioned a to relative and designed a::before and a::after then i put a gray background on before and after elements and kept hover effects in such way that as one hovers on <a> they will pop from outside a to fill <a>.
The problem is that the overflow hidden is not working on <a>.
What i discovered is if i removed <li> and simply put <a> without <ul> and <li> then it worked.
What may be the problem?
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:absolute to the parent container made it work.
PS: This is for anyone looking for a solution to dynamically truncating text.
EDIT: This was meant to be an answer for this question but since they are related and it could help someone on this question I shall also leave it here instead of deleting it.
In addition to provided answers:
it seems like parent element (the one with overflow:hidden) must not be display:inline. Changing to display:inline-block worked for me.
.outer {_x000D_
position: relative;_x000D_
border: 1px dotted black;_x000D_
padding: 5px;_x000D_
overflow: hidden;_x000D_
}_x000D_
.inner {_x000D_
position: absolute;_x000D_
left: 50%;_x000D_
margin-left: -20px;_x000D_
top: 70%;_x000D_
width: 40px;_x000D_
height: 80px;_x000D_
background: yellow;_x000D_
}<span class="outer">_x000D_
Some text_x000D_
<span class="inner"></span>_x000D_
</span>_x000D_
<span class="outer" style="display:inline-block;">_x000D_
Some text_x000D_
<span class="inner"></span>_x000D_
</span>Actually...
To hide an absolute positioned element, the container position must be anything except for static. It can be relative or fixed in addition to absolute.
Evidently, sometimes, the display properties of parent of the element containing the matter that shouldn't overflow should also be set to overflow:hidden as well, e.g.:
<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!)
Source: Stackoverflow.com