Overflow

Overflow

What happens to content that doesn't fit your box?

content overflow

div {
  width: 200px;
  height: 100px;
  overflow: visible;   /* default: spills out */
  overflow: hidden;    /* crops */
  overflow: scroll;    /* always scrollbars */
  overflow: auto;      /* scrollbars only if needed - best! */
}

overflow-x and overflow-y

Control each axis separately:

div {
  overflow-x: hidden;
  overflow-y: auto;
}

Text-averflow combo

For single-line truncation:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* show ... */
}

Never let horizontal scrollbars sneak in

Horizontal scrolling (overflow-x: auto leaking from wide boxes) ruins mobile UX. Add:

body {
  overflow-x: hidden;
}

TL;DR

• visible: content spills out.
• hidden: crop.
• scroll: force bars.
• auto: bars when needed.
• overflow-x/-y per axis.
• overflow-x: hidden on body when debugging horizontal scroll.