CSS Overflow

Overflow handling, text truncation, scrollbars, and content clipping.

Overview

Overflow controls what happens when content exceeds its container.

Key Concepts

• overflow — Horizontal and vertical overflow
• overflow-wrap — Word breaking
• text-overflow — Ellipsis truncation
• clip-path — Shape clipping
• Custom scrollbars — Styled scrollbars

Code Examples

/* Basic overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Custom scrollbar */
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Text truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Overflow wrap */
.break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Clip path */
.circle {
  clip-path: circle(50%);
}

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Image object-fit */
.image-cover {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  width: 100%;
  height: 200px;
}

/* Code block overflow */
.code-block {
  overflow-x: auto;
  white-space: pre;
  font-family: monospace;
}

/* Modal content */
.modal-body {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

/* Marquee effect */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Ellipsis with max-width */
.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bidirectional ellipsis */
.bidirectional-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Practice

Build a card component with proper overflow handling and truncation.