The CSS overflow property controls what happens when content is too large to fit inside an element’s defined dimensions.

visible is the default value. Content that does not fit inside the container can extend outside its boundaries.

.box {
  width: 300px;
  height: 100px;
  overflow: visible;
}

hidden clips content that exceeds the element’s boundaries. No scrollbar is displayed.

.box {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

With scroll, the browser provides scrolling mechanisms even when the content does not currently require scrolling.

.box {
  width: 300px;
  height: 150px;
  overflow: scroll;
}

auto is one of the most useful overflow values. Scrollbars are displayed when the content exceeds the available space.

.box {
  width: 300px;
  height: 150px;
  overflow: auto;
}

The overflow-x property controls what happens when content exceeds the element horizontally.

.container {
  overflow-x: auto;
  overflow-y: hidden;
}

The overflow-y property controls vertical content that extends beyond the container.

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

CSS provides properties such as text-overflow, white-space and overflow to control long single-line text.

.title {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

The white-space property controls whether text should wrap onto a new line and how whitespace is handled.

.text {
  white-space: nowrap;
  overflow: hidden;
}

overflow-wrap allows long words or strings to break when they would otherwise overflow their container.

.text {
  overflow-wrap: break-word;
}

Responsive websites should avoid unwanted horizontal scrolling. Use flexible widths, max-width, appropriate wrapping and controlled overflow.

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.container {
  max-width: 100%;
  overflow-x: auto;
}