CSS Overflow: visible and hidden

Give a box a fixed size and put more content in it than fits, and the extra part has to go somewhere. That is overflow, and the overflow property decides what happens to it.

visible (the default)

The extra content spills out of the box and is drawn over whatever is outside.

1
2
3
4

<style>
  .box { width: 180px; height: 60px; border: 2px solid #1a5276; background: #f4f9fc; margin-bottom: 40px; }
</style>
<div class="box">This text is much longer than the box can hold, so it spills out of the bottom.</div>

hidden

The extra content is clipped. You cannot see it, and the user cannot scroll to it.

1
2
3
4

<style>
  .box { width: 180px; height: 60px; border: 2px solid #1a5276; background: #f4f9fc; overflow: hidden; }
</style>
<div class="box">This text is much longer than the box can hold, so the part that does not fit is cut off.</div>

Where overflow: hidden is actually used

Clipping text is rarely the goal. These are the real uses:

• Rounded corners on images: a child image reaches the corners of a card, and overflow: hidden plus border-radius on the card clips it. See Border Radius.
• Containing floats and margins: an element with overflow: hidden (or auto) contains its children’s margins and floats.
• Cutting off an animation that slides in from outside the box.
• Single-line ellipsis: with white-space: nowrap. See White Space and Wrapping.