CSS- Overflow Property

In this article, we will go over the CSS property overflow.

What is overflow? And what does overflow do?

Let's paint an example. Imagine you have an element in HTML such as a div tag. This div tag area contains a specific width and height. Thus, it can only hold a certain amount of text within its space. After putting more text than the element can hold, what happens with the extra text that exceeds the amount of text the element can hold?

The CSS overflow property can decide what to do with this extra text. Using the different parameters, the overflow property can create a scroll bar so that extra text can be fitted in or overflow can cut off all extra text than above its limit so that nothing extra shows up.

We will go over all the overflow parameters below with illustrations so you can understand all the parameters and options which exist for this property.

The following chart represents all the different overflow parameters. These will all be explained below:

Summary of Overflow Parameters

Div Tag Without a Height Element

Before we go into each individual overflow parameter, let's create a div tag, since this is what we'll need to illustrate how overflow works.

The first example we will do is a div tag with only a width attribute, 200px, but with no height. We put a pretty lengthy paragraph in this div tag.

HTML
The HTML used to create this div block is:

<div id="divnoheight"> Learning electronics may seem daunting at first but if you learn each component one by one and what each does, it makes learning electronics easier. Resistors are components which impede, or resist, the flow of electricity. They are used in circuits many times to lower the current in a circuit so that there isn't excess current to damage or blow out a component. This is why many times you see resistors in series with LEDs. The resistor lowers the overall current in the circuit so that the LED doesn't get blown out. A capacitor is an electronic component that stores electric charge. It stores voltage and will release it if the main power of the circuit goes out. In this way, a capacitor can be a temporary power supply. A transistor is used in a circuit either as a switch or an amplifier. </div>

The CSS code used to create this div block is:

#divnoheight { width:200px; background:#aaa; }

Without a height attribute, the div tag will stretch to fit all the text which is entered between it.

In the case of a div tag with no height attribute, overflow will not occur and, thus, the overflow property will not be needed. Since there is no height attribute, there is no height limit. Thus, any text that is entered in between the div tag will make the div tag stretch out vertically, since it doesn't have a vertical (height) limit. The height will be flexible and adjust depending on the content that fills up the div tag.

Div With Height Element

But now let's say we need an element to only be a certain height and none taller, let's say, 200px. If we now specify an absolute height for it to be, now overflow can occur. Let's create the same div tag we did above but now let's make the div tag element 200px in height. The HTML code says the same, except change the div tag name from divnoheight to divheight.

The CSS code will for this div tag will now be:

#divheight { width:200px; height:250px; background:#aaa; }

This is how the element will look with the same paragraph, as above, placed in the div tag:

You can see now how the text spills over. There is text flowing outside of the boundaries of the div tag. This is called overflow and is the subject of this whole article.

How do we deal with this overflow so that it doesn't look as horribly as it does now, spilling over the div tag's boundaries?

Overflow: Visible

By default, without an overflow property being stated in the CSS div tag, it is set to overflow:visible.

If you type in the line overflow:visible into the CSS code for the divheight, you will get the same exact overflow which you see above, with the text spilling over the boundaries of the div tag.

So, with the CSS code, being the following:

#overflowvisible { width:200px; height:250px; background:#aaa; overflow:visible; }

This would produce the same exact overflow we saw above:

This is just to show you the default status, but this is not usually what is desired when dealing with overflow of an HTML element.

Overflow:scroll

Now we deal with how to effectively handle overflow so that it doesn't spill over in pages and cause that messy look.

One property we can apply to a div tag where there's overflow is:

overflow:scroll;

This line of code will create vertical and horizontal scrollbars so that extra text exceeding the div tag's space is placed inside the div tag and a user can view all the text placed inside the tag by scrolling down to view it.

Let's see how the element we created above which overflowed previously would now look with this scroll attribute applied to the overflow property.

The full CSS code to create this is:

#scrollbar { width:200px; height:250px; background:#aaa; overflow:scroll; }

Thus, the scroll parameter to an overflow property is an effective means to handle overflow of an element.

Note that with the scroll parameter, the div tag will always contain a scroll bar, whether there is overflow or not. It will contain two scroll bars, a vertical scroll bar and a horizontal scroll bar. However, you can see that in the above case, the horizontal scroll bar is defunct and is not needed.

If you want, you can only show one scroll bar, the vertical scroll bar or the horizontal scroll bar, and not both.

To only show the vertical scroll bar (and not the horizontal), the line of code that would go into the div tag in the CSS page would be:

overflow-y:scroll;

To only show the horizontal scroll bar (and not the vertical), the line of code that would go into the div tag in the CSS page would be:

overflow-x:scroll;

Overflow:Auto

Another feature we can add to the CSS code of an HTML element to prevent overflow is overflow:auto.

You will see this is even a more effective way to handle overflow than overflow:scroll for the most part.

The difference between overflow:auto and overflow:scroll is overflow:auto will only create a scroll bar when there is overflow. Overflow:scroll will always have a scroll bar whether there is overflow or not. Again, overflow:auto creates a scroll bar only when there is overflow. Overflow:auto will also take out the defunct horizontal scroll bar which you see above, which is not used. So basically, overflow:auto only adds in elements that are needed when they are needed, while overflow:scroll, by default, has everything always.

Here is how the above text would look with overflow:auto:

The full CSS code to create the above is:

#overflowauto { width:200px; height:250px; background:#aaa; overflow:auto; }

Overflow:Hidden

There is another overflow property that can be used to deal with overflow called overflow:hidden.

The following CSS code would be placed in the HTML element in which we want to hide extra text.

overflow:hidden;

This cuts off text that exceeds the space in the div tag so that the extra text cannot be seen, even though it still exists.

Let's look at our above paragraph we've been using along with the hidden property applied to it.

The full CSS to create this is:

#overflowhidden { width:200px; height:250px; background:#aaa; overflow:hidden; }

In certain cases, where you don't want any extra text or any scroll bars, you can apply overflow:hidden to a div tag. However, this is probably not want you want. However, if you do need this, it is available.