Codectionary / Developer documentation / CSS

overflow Property

overflow controls what happens when content is too large to fit its container. visible (default) lets content spill out. hidden clips anything beyond the box. scroll always shows scrollbars. auto adds scrollbars only when needed. overflow-x and overflow-y control each axis independently.

Syntax

overflow: visible | hidden | scroll | auto;

Examples

Basic Overflow Values

The four core values and their visual effect.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-overflow{max-width:20rem;border:2px solid #a16207;margin-bottom:3rem}.visible{height:100px}

.visible { overflow: visible; } /* content spills out, default */
.hidden { overflow: hidden; height: 100px; } /* content beyond 100px is clipped */
.scroll { overflow: scroll; height: 100px; } /* always shows scrollbars */
.auto { overflow: auto; height: 100px; } /* scrollbars only appear if needed */
  1. The same long content is used inside four labelled regions.
  2. visible can paint beyond its boundary, hidden clips, and scroll/auto provide their specified scrolling behaviour.
  3. Scroll the overflowing regions and compare them; visible overflow can overlap later content by design.
HTML used by this example
<h3>visible</h3><div class="visible preview-overflow"><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p></div><h3>hidden</h3><div class="hidden preview-overflow"><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p></div><h3>scroll</h3><div class="scroll preview-overflow"><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p></div><h3>auto</h3><div class="auto preview-overflow"><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p><p>Another lesson paragraph.</p></div>

Truncating Text with Ellipsis

A common combination for single-line text truncation.

/* Demo setup: sizing, structure or neutral surfaces. */
.truncate{border:1px solid #94a3b8;padding:.5rem}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* "This is a very long heading..." */
  1. The line is constrained by max-width and prevented from wrapping.
  2. hidden overflow and text-overflow combine to display an ellipsis.
  3. The full text remains in the HTML; do not rely on a truncated label as the only way to identify important content.
HTML used by this example
<p class="truncate">A long course heading that needs a constrained single-line preview</p>

Parameters and values

  • visible (keyword): Default - overflowing content is not clipped
  • hidden (keyword): Overflowing content is clipped and inaccessible
  • scroll (keyword): Always shows scrollbars, even if content fits
  • auto (keyword): Shows scrollbars only when content overflows

Best practices

  • Use overflow: auto over overflow: scroll in most cases, so scrollbars only appear when actually needed
  • Setting overflow: hidden on a parent is a classic (if slightly dated) way to contain floated children - modern layouts typically use flexbox/grid instead
  • Combine overflow: hidden with text-overflow: ellipsis and white-space: nowrap for single-line text truncation
  • Remember overflow: hidden clips focusable content too - test keyboard navigation around clipped areas

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading