CSS gives you precise control over how your content appears on a web page. One CSS property, overflow, is key for front-end programmers to know, since it can cause your content to look messy or even unreadable if left unchecked in some situations.
In this post, we’ll explain what overflow is in CSS. Then, we’ll explain how to control it with the following CSS properties:
Whether you’re using plain CSS or a framework like Bootstrap, here’s what you need to know.
What is overflow in CSS?
In CSS, overflow occurs when an element’s content does not fit entirely inside the element box. This can happen when an element has a specified height that’s too small for the content it contains. You can use the CSS overflow property to control what happens to the overflow.
Before we look at the overflow property, let’s clarify what we meant by the “element box.” According to the CSS box model, a box is generated for HTML elements. This box comprises four layers: the content itself, the padding, the border, and the margin.
When the content of an HTML element extends beyond any of the box’s edges — whether that’s the content edge, padding edge, border edge, or margin edge — it is called overflow.
CSS Overflow Property
The CSS overflow property has several ways to control overflow. Let’s take a closer look at its values.
CSS Overflow Visible
Visible means that the overflowing content will not be clipped. Instead, it will render outside the element’s box and may overlap with other elements on the page. This is the default value of the overflow property.
CSS Overflow Hidden
To prevent overflow from rendering outside the element’s box, you can set the overflow property to hidden. This will clip the content at the box’s padding edge. Also, it will not allow the user to view the content beyond the padding edge by scrolling.
Note that this value still allows programmatic scrolling, which means the box is technically a scroll container. A user could use the mechanisms defined by the CSSOM View Module, for example, to see the hidden content.
CSS Overflow Scroll
To hide overflow from rendering outside the element’s box while enabling users to view that content, set the overflow property to “scroll.” The overflow will still be clipped at the box’s padding edge. However, a scrollbar is be added so users can scroll to see the content that’s not currently visible.
CSS Overflow Auto
The “auto” value is similar to scroll, but adds a scrollbar only if the box has overflow.
In the example below, both divs are defined have an overflow value of auto, but only the second div has scrollable overflow and a scrollbar.
Instead of using the overflow, you can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically.
The overflow-x property controls horizontal overflow – in other words, overflow from the left and right of an element’s box.
In this example, overflow-x is set to scroll so you can scroll from left to right to view the image. But overflow-y is set to hidden so you can't scroll up and down.
The overflow-y property controls vertical overflow, which is overflow from the top and bottom of an element’s box.
In this example, overflow-y is set to scroll and overflow-x is set to hidden this time.
CSS Overflow Shorthand
You can also use the shorthand overflow property instead of defining both the overflow-x and overflow-y properties. If two values are specified, the first represents the value of overflow-x and the second for overflow-y, shown below:
If there is only one value, it applies to both the overflow-x and overflow-y properties. For example, if I defined the div containing the image with overflow: scroll; then the image could be scrolled horizontally and vertically.
CSS Overflow Wrap
The CSS overflow-wrap property specifies the circumstances when the browser breaks a line of text onto multiple lines. Without this property, a string of text that is too long to fit within the line box would be unbreakable and cause overflow.
To use overflow-wrap, the white-space property must allow wrapping. That means the white-space property must be set to “normal,” “pre-wrap,” and “break-spaces,” or “pre-line.” Most often you’ll see it set to “normal.”
The overflow-wrap property can take three values: normal, anywhere, or break-word.
CSS Overflow Wrap Normal
When overflow-wrap is set to normal, a line of text will only break at unforced break points, like the space between two words.
CSS Overflow Wap Anywhere
When the anywhere value is applied, lines may break at forced break points if there are no unforced ones.
For example, a long word or URL may be broken to wrap on another line. No hyphen is inserted at the break point.
With this value, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are considered when calculating min-content intrinsic sizes (the smallest size a box could take without causing overflow).
CSS Overflow Wap Break Word
If the break-word value is used, lines may break at forced break points if there are no unforced ones. No hyphen is inserted at the break point.
However, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are not considered when calculating min-content intrinsic sizes (in other words, the smallest size a box could take without causing overflow).
CSS Text Overflow
The CSS text-overflow property controls how inline content that overflows its container element is rendered on the page.
To use the CSS text-overflow property, the block container element must be defined by the overflow property with a value other than visible. Most often, it will be defined by “overflow: hidden.” The container must also be defined by the white-space property and set to “nowrap.” Otherwise, the inline content will wrap to the next line, instead of clipping.
There are two CSS text-overflow property values, clip and ellipsis.
CSS Overflow Clip
Setting the CSS text-overflow property to “clip” will clip the inline content that overflows its block container element at the padding edge. Visitors will not be able to see content beyond the edge where it’s clipped.
This is similar to the “hidden” value for the CSS overflow property. The difference is that clip forbids scrolling of any kind, including programmatic scrolling. That means the element’s box is not a scroll container.
CSS Overflow Ellipsis
Using the ellipsis value will cut the inline content that overflows its block container element at the padding edge, and a little extra to fit the ellipsis.
his value also forbids any scrolling, including programmatic scrolling, which tells the browser that the element’s box is not a scroll container. Visitors will not be able to see content beyond the edge where it’s clipped.
Control overflow in your layouts with CSS.
Overflow is a common issue that you’ll likely run into either creating layouts from scratch or customizing pre-designed ones. Understanding how to control it will ensure you can create and customize your layouts without compromising on alignment or positioning. Thankfully, you only need some basic web design knowledge to do so.
Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.