What CSS rule would you use to prevent text from overflowing its container?
•9 min read
✅ overflow (most common rule)
.container {
width: 200px;
overflow: hidden;
}
✔ If you want to prevent overflow + hide extra text
.container {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
✨ This will:
- Prevent text overflow
- Keep text in one line
- Show “…” when text is too long
✔ If you want text to wrap instead of overflowing
.container {
width: 200px;
overflow-wrap: break-word;
}
✨ This forces long words or URLs to break and fit inside the box.
✔ If you want multi-line ellipsis (modern solution)
.container {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* number of lines */
}
⭐ Most Recommended for Preventing Overflow
Use:
overflow: hidden;
and if needed:
overflow-wrap: break-word;
