CSS - Overflow

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–12 minutes

Manage overflowing content with scrollbars, truncation, and clamping techniques.

Learning Objectives

• Control overflow with overflow, overflow-x/y.
• Truncate text with ellipsis and clamp lines.

Details & Examples

.scroll { overflow: auto; max-height: 240px; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

Try it

Common Pitfalls

• text-overflow: ellipsis requires overflow: hidden and no wrapping.

Checks for Understanding

1. How do you clamp text to 2 lines?

Exercises

1. Create a scroll container limited to 240px height with momentum scrolling where appropriate.
2. Implement single-line truncation with ellipsis and a 3-line clamp variant.