CSS Overflow

What happens when content is too big.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

The overflow property controls content that does not fit in its box:

visible (default): content spills outside the box.
hidden: extra content is cut off.
scroll: scrollbars are always shown.
auto: scrollbars appear only when needed.

Use overflow-x and overflow-y to control each direction. text-overflow: ellipsis adds "…" to cut-off text.

Key Takeaways: CSS Overflow

Mastering CSS Overflow helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Overflow Code Example

CSS

<style>
  div { width: 220px; height: 70px; border: 2px solid #2563EB; margin-bottom: 12px; padding: 6px; }
  .hidden { overflow: hidden; }
  .auto   { overflow: auto; }
  .dots   { height: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>

<div class="hidden">overflow: hidden cuts off this long text so that whatever does not fit inside the box is simply not shown.</div>
<div class="auto">overflow: auto adds a scrollbar when this long text does not fit inside the box. Scroll me!</div>
<div class="dots">text-overflow: ellipsis shortens a long single line nicely</div>

Free sign-in required · Google login available

CSS Overflow Practice Exercises

Check what you learned in “CSS Overflow”.

/ 3 solved

Fill in the blank

Show scrollbars only when the content does not fit.

.box {
  height: 100px;
  overflow: ;
}

✓ Correct! Not quite. Try again.

Multiple choice

Which value cuts off content that does not fit?

hidden visible auto wrap

✓ Correct! Not quite. Try again.

Code challenge

Set overflow: hidden on the box.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Overflow

💡 Key Takeaways: CSS Overflow

CSS Overflow Code Example

CSS Overflow Practice Exercises

Key Takeaways: CSS Overflow