I'm facing an issue with the overflow:hidden; property not working as expected.
My goal is to have multiple inline elements inside a div be cut off at 20 pixels using overflow: hidden;
Here's the code snippet:
<div class="container">
<span>Hello World 1</span>
<span>Hello World 2</span>
<span>Hello World 3</span>
</div>
CSS:
.container {
width: 20px;
overflow: hidden;
}
fiddle: http://jsfiddle.net/7XHPC/
The provided code demonstrates how the Hello World inline elements wrap around the container instead of being clipped by overflow: hidden;
Any insights on how to resolve this would be greatly appreciated. Thank you.