How Does CSS Overflow Work?

.container {
  overflow: visible; /* Default - content spills out */
  overflow: hidden; /* Clips content */
  overflow: scroll; /* Always shows scrollbar */
  overflow: auto; /* Scrollbar when needed */
}

/* Control each axis */
.container {
  overflow-x: auto;
  overflow-y: hidden;
}

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

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

html {
  scroll-behavior: smooth;
}

.container {
  overscroll-behavior: contain;
}