CSS Overflow, Visibility and Opacity

Decide what happens when content is too big for its box, add scrollbars, truncate text with an ellipsis, and hide elements with visibility, opacity or display.

Lesson 13 of 49Beginner16 min read

Content doesn't always fit. A long product name runs past the edge of its card, a chat window fills up with messages, a wide code sample is wider than a phone screen. When content is bigger than its box, CSS has to decide what to do with the extra, and the overflow property lets you choose: show it, clip it, or add scrollbars.

The second half of this lesson is about hiding things. display: none, visibility: hidden and opacity: 0 all make an element invisible, but they behave very differently. One removes the element from the layout, one keeps its space, and one keeps it clickable. Picking the wrong one causes some of the most confusing bugs beginners meet, such as invisible buttons that still catch clicks.

You'll learn the overflow values, how to scroll in one direction only, how to cut off text with an ellipsis ("…"), and when to use each way of hiding an element, including the accessible way to hide text visually while keeping it for screen readers.

The overflow values

ValueWhat happens to extra content
visibleThe default. Content spills outside the box and may overlap other things.
hiddenExtra content is clipped and can't be scrolled to by the user.
scrollScrollbars are always shown, even when not needed.
autoScrollbars appear only when the content is too big. Usually the best choice.
clipLike hidden, but the box can't be scrolled even with code.

Overflow only matters when the box has a limited size, such as a height, max-height or fixed width. Without a size limit, the box simply grows to fit its content.

Scrolling in one direction

Use overflow-x and overflow-y to control each direction separately:

CSS
.table-wrap { overflow-x: auto; }   /* sideways scrolling for wide tables */
.chat { max-height: 300px; overflow-y: auto; } /* vertical scrolling */

This is the standard fix for wide tables and code blocks on phones: the wide content scrolls inside its own box, and the page itself never scrolls sideways. Add overscroll-behavior: contain to stop the page scrolling when the user reaches the end of the inner box.

Truncating text with an ellipsis

To cut a single line of text off with "…", you need three properties together:

CSS
.title {
  white-space: nowrap;      /* keep it on one line */
  overflow: hidden;         /* hide the extra */
  text-overflow: ellipsis;  /* show … where it's cut */
}

For two or three lines, use -webkit-line-clamp, which every modern browser supports despite the prefix: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;. Long URLs and words that won't wrap can be broken with overflow-wrap: anywhere.

Hiding elements: display, visibility, opacity

RuleVisible?Takes up space?Clickable?Read by screen readers?
display: noneNoNoNoNo
visibility: hiddenNoYesNoNo
opacity: 0NoYesYesYes

Use display: none to remove something completely, such as a closed menu. Use visibility: hidden when you want the space kept. opacity is for fading: values between 0 and 1 make the element see-through, and it's the property to transition for smooth fade effects.

CSS Overflow Syntax

Overflow and hiding

.box { overflow: auto; }
.wide { overflow-x: auto; overflow-y: hidden; }
.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gone { display: none; }
.invisible { visibility: hidden; }
.faded { opacity: 0.5; }

CSS Overflow Summary

  • overflow decides what happens when content is bigger than its box: visible, hidden, scroll, auto or clip.
  • Prefer auto so scrollbars appear only when needed.
  • overflow-x: auto keeps wide tables and code blocks from breaking phone layouts.
  • An ellipsis needs white-space: nowrap, overflow: hidden and text-overflow: ellipsis.
  • display: none removes an element, visibility: hidden keeps its space, and opacity: 0 keeps it clickable.

CSS Overflow Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A scrolling message panel

.chat {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0 12px;
  font-family: sans-serif;
  overscroll-behavior: contain;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2The panel can't grow taller than 150 pixels.
  2. Line 3A vertical scrollbar appears because the messages need more room.
  3. Line 8Scrolling to the end doesn't start scrolling the page behind it.
Example 2

One-line and three-line truncation

p { width: 260px; font-family: sans-serif; }

.one {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

.three {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 4 to 6The heading stays on one line and ends in "…".
  2. Lines 10 to 13The paragraph is cut after three lines.
Example 3

display vs visibility vs opacity

Hover over each box's space. The opacity box still reacts, because it's still there.

.row { display: flex; gap: 8px; margin-bottom: 8px; }
.b { width: 60px; height: 40px; display: grid; place-items: center; background: #c7d2fe; font: bold 16px sans-serif; }
.b:hover { outline: 3px solid #f97316; }

.none { display: none; }
.vis { visibility: hidden; }
.op { opacity: 0; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 5B is removed, so C moves left.
  2. Line 6B is hidden but its space stays.
  3. Line 7B is invisible, keeps its space and still shows the hover outline.

Common CSS Overflow Mistakes

overflow: hidden hiding focus rings and dropdowns

Don't
.card { overflow: hidden; } /* clips the dropdown menu inside */
Do
.card { overflow: visible; }
.card img { border-radius: 12px; } /* round the image itself instead */

overflow: hidden is often added just to round corners, but it also clips menus, tooltips and focus outlines.

Ellipsis without nowrap

Don't
.title { overflow: hidden; text-overflow: ellipsis; }
Do
.title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Without nowrap, the text wraps onto new lines and nothing overflows sideways, so no ellipsis appears.

Hiding with opacity: 0 alone

Don't
.menu.closed { opacity: 0; } /* invisible links still catch clicks */
Do
.menu.closed { opacity: 0; visibility: hidden; }

Adding visibility: hidden stops clicks and keyboard focus while keeping the fade.

CSS Overflow in Real Projects

Overflow on real sites

Every chat app uses a scrolling message panel with overflow-y: auto. Shops truncate long product names with ellipses so cards stay the same height. Documentation sites, including this one, wrap code blocks and tables in overflow-x: auto containers so phones never scroll sideways. Modal dialogs often set overflow: hidden on the <body> while open to stop the page behind from scrolling.

CSS Overflow Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Show scrollbars only when the content is too big.

.panel {
  max-height: 200px;
  overflow: ;
}
Multiple choiceeasy

Which rule hides an element but keeps its space in the layout?

Multiple choicemedium

Which three properties make a one-line ellipsis?

Multiple choicemedium

A table is wider than the phone screen. What's the best fix?

Fix the bugmedium

The caption should be cut off with an ellipsis on one line, and the hidden note should not take up any space. Fix it.

.caption {
  width: 200px;
  overflow: visible;
  text-overflow: ellipsis;
}
.note { visibility: hidden; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Caption stays on one line
  • Caption overflow is hidden
  • Ellipsis is set
  • Note takes no space

CSS Overflow Quiz

5 questions to check what you learned.

  1. What is the default value of overflow?

    • hidden
    • auto
    • visible
    • scroll

  2. What's the difference between overflow: scroll and overflow: auto?

    • There's none
    • auto only scrolls sideways
    • scroll hides the content
    • scroll always shows scrollbars; auto shows them only when needed

  3. Which hidden element can still be clicked?

    • One with display: none
    • One with visibility: hidden
    • One with opacity: 0
    • None of them

  4. How do you hide a text label visually but keep it for screen readers?

    • display: none
    • visibility: hidden
    • color: transparent
    • A visually-hidden class that shrinks and clips the element

  5. What does overscroll-behavior: contain do?

    • Stops scrolling from passing to the page when the inner box reaches its end
    • Hides scrollbars
    • Makes the box scroll faster
    • Prevents the box from scrolling

CSS Overflow Challenge

A product card list

  1. Give .list a max-height of 160px and vertical scrolling with overflow-y: auto
  2. Truncate each .name to one line with an ellipsis
  3. Make .sold products half transparent with opacity: 0.5
  4. Remove .hidden items from the layout completely
.list { width: 220px; padding: 0; list-style: none; font-family: sans-serif; }
li { padding: 10px; border-bottom: 1px solid #e5e7eb; }
.name { display: block; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • List scrolls vertically
  • Names are truncated
  • Sold items are faded
  • Hidden items take no space

Related CSS topics

12Width & HeightControl element size with width, height, min and max sizes, box-sizing and aspect-ratio, and make boxes that shrink nicely on small screens.16DisplayControl how a box behaves: block, inline, inline-block, none, flex, grid.17Position & z-indexMove elements with relative, absolute, fixed and sticky, and stack them with z-index.
Esc
↑↓ to navigateEnter to open