Skip to content
Laviyx Learn

Try

CSS course menu

CSS overflow: hidden, scroll, auto and Text Overflow with Ellipsis

Learn what happens when content is bigger than its box and how to control it with CSS overflow: visible, hidden, scroll, auto and clip, overflow-x and overflow-y, scrollable areas, truncating text with an ellipsis, and line clamping.

Beginner6 min readUpdated
On this page

Overflow happens when content does not fit inside its box, usually because the box has a fixed size or the content is very long. CSS lets you decide what to do with the extra.

The overflow values#

CSS
.box {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  height: 80px;
  margin: 0 8px 16px 0;
  border: 2px solid #2f5fe0;
  font-size: 14px;
}
HTML
<div class="box" style="overflow: visible">visible: the text spills out of the box and over whatever is below it.</div>
<div class="box" style="overflow: hidden">hidden: the extra text is cut off and cannot be reached at all.</div>
<div class="box" style="overflow: auto">auto: scrollbars appear only when needed. Scroll me to read the rest.</div>
Result
ValueEffect
visibleThe default. Content spills outside the box.
hiddenExtra content is clipped. It can still be scrolled with code.
clipLike hidden, but no scrolling at all
scrollAlways shows scrollbars, even when not needed
autoShows scrollbars only when content overflows. Usually the best choice.

One direction only#

overflow-x and overflow-y control each direction. A common use is making wide content scroll sideways instead of breaking the page layout on phones:

CSS
.table-wrap { overflow-x: auto; border: 1px solid #ddd; }
table { border-collapse: collapse; }
td { padding: 6px 14px; border: 1px solid #ddd; white-space: nowrap; }
HTML
<div class="table-wrap">
  <table><tr><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td></tr></table>
</div>
Result

Scrollable areas#

max-height with overflow-y: auto makes a box that grows with its content up to a limit and then scrolls:

CSS
.log {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 0 8px;
  font-family: monospace;
}
HTML
<div class="log">
  <p>10:01 Server started</p><p>10:02 User signed in</p><p>10:05 Order placed</p>
  <p>10:07 Email sent</p><p>10:09 User signed out</p>
</div>
Result

Make sure scrollable areas can be reached with the keyboard. If the area contains no focusable elements, add tabindex="0" and an accessible label so keyboard users can scroll it.

Truncating text with an ellipsis#

To cut a single line of text with "…", combine three properties:

CSS
.title {
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
HTML
<p class="title">A very long course title that will not fit in the space available</p>
Result
  • white-space: nowrap keeps the text on one line.
  • overflow: hidden clips the extra.
  • text-overflow: ellipsis shows "…" where it is cut.

Several lines#

To truncate after a number of lines, use line-clamp:

CSS
.excerpt {
  width: 260px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
HTML
<p class="excerpt">This excerpt is cut after two lines with an ellipsis, so cards with descriptions of different lengths still line up neatly in a grid.</p>
Result

The -webkit- prefixed version shown here works in all current browsers. Truncated text is hidden from sighted users, so make sure the full text is available somewhere, such as on the detail page.

Practice#

Practice exercise

Make a chat box 220px wide that is at most 120px tall and scrolls vertically, where each message is on one line and long messages end in an ellipsis.

Show solution
CSS
.chat { width: 220px; max-height: 120px; overflow-y: auto; border: 1px solid #ccc; }
.chat p {
  margin: 0;
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #eee;
}
HTML
<div class="chat">
  <p>Asha: Hi!</p>
  <p>Ravi: Did you finish the CSS overflow lesson already?</p>
  <p>Asha: Yes, the ellipsis part was the most useful bit for me</p>
  <p>Ravi: Same here</p>
  <p>Asha: Next up is fonts</p>
</div>
Result

Key takeaway#

Finished this lesson?

Related lessons

CSSCSS Width, Height, min/max and box-sizing: border-boxLearn to size elements in CSS: width and height, auto sizing, min-width, max-width, min-height and max-height, box-sizing content-box versus border-box, aspect-ratio, and intrinsic sizes such as fit-content.Beginner6 min readCSSCSS Text Styling: text-align, line-height, text-decoration, text-transform and SpacingStyle text with CSS: colour, text-align, line-height, letter-spacing and word-spacing, text-decoration and underline offset, text-transform, text-indent, white-space and word-break, text-wrap balance, and readable line length.Beginner4 min readCSSStyling HTML Tables with CSS: Borders, Zebra Stripes and Responsive TablesStyle tables with CSS: border-collapse, cell padding, header styles, zebra striping with nth-child, hover highlighting, aligning numbers, caption-side, sticky headers, and making wide tables scroll on small screens.Beginner7 min read