Overflow

overflow controls what happens when content becomes bigger than its container.

Basic Syntax

overflow: value;

Values:

• visible
• hidden
• scroll
• auto

1. overflow: hidden

Hides extra content outside the box.

2. overflow: scroll

Always shows scrollbar.

3. overflow: auto

Scrollbar appears ONLY when needed.

4. overflow-x and overflow-y

Control horizontal and vertical overflow separately.

Text Overflow

Used when text is too long.

text-overflow: ellipsis

Shows:

Hello this is very lo...

instead of breaking layout.

Required Properties

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

ALL 3 are needed.