Introduction
In this unit we will see how CSS works when content within an element tends to overflow out of it. We will look at overflows with scrollbars, word wrapping techniques and much more essentially related to all these overflows cases.
This unit is fairly shorter as compared to the others and will take at most just a few minutes to get the hang of! Yes it's true! Anyways, this excludes the practice time which is way more than just a few minutes!
So let's start off with overflows.
What is an overflow?
When an element can't fit the content within it, an overflow occurs i.e content goes out of the element.
Consider the following illustration of an overflow:
<div>Disproportionation is a long word and it might overflow out of this element</div>
div {
width: 100px;
height: 50px;
background-color: gold;
}
As you can see the text within the div
flows out of it i.e overflows. The element simply can't fit in the content within its area.
If we specify a width only and remove the declaration for height
, the height will adjust freely as illustrated below to fit the content in.
However in this case, even removing a custom height doesn't stop the content from overflowing. This is because of the word Disproportionation..
- it is longer than the width of the div
and hence can't be condensed in. CSS can't break a word, by default, but we can get it to do this, as we will see later.
So this was a simple illustration of an overflow. As you might agree, overflows look bad - they compromise at the perfection of a design and hence need to be rectified before moving on with other concerns in the design process.
So how to solve it?
The overflow property
To solve overflows in CSS, we have the overflow
property. It specifies what to do in the case of an overflow. The values include:
scroll
- adds a scroll bar, always, to allow any overflow to be scrolledhidden
- hides off the overflowing content.auto
- adds a scroll bar, only when needed, to allow the overflow to be scrolled.visible
- is the default, and makes any overflow visible.
Let's see how all of these values work in the same overflow example we saw above. We'll start with scroll
:
scroll
- add scroll bars
div {
overflow: scroll;
}
Here, instead of the content flowing out, it is put into the div
and allowed to be scrolled through. If you are on a desktop device you might be able to see a scroll bar, on the div
element however on a mobile device there is no such scrollbar present.
scroll
adds both the horizontal and vertical scroll bars even if there is no overflow occuring in the element.Let's now see how hidden works.
hidden
- hide the overflow
overflow: hidden
serves to hide any overflowing content within an element, or as you might remember from the CSS Floating chapter, to get an element fit across its floated children. For now we are only concerned with the former part i.e hide any overflowing content.
Consider the example below demonstrating a hidden
overflow:
div {
overflow: hidden;
}
As you can see, the overflowing portion is simply cut-off from the final result. No scroll bars, no reduction in the content's area; just chop off the overflow.
auto
- scroll overflow when needed
Unlike scroll, which adds a scroll bar always regardless of whether an overflow occurs, this value adds it only when an overflow occurs. auto
automatically detects any overflow, and then rectifies it accordingly.
See the example below to get a better idea.
Here, since the content does overflow auto
adds a scroll bar to deal with it.
div {
overflow: auto;
}
In contrast, here the content doesn't overflow and likewise no scroll bars are given to the div
:
div {
overflow: auto;
}
auto
does all the work, of calculating which side is overflowing, itself. If the horizontal side is overflowing it will add a scroll bar to the right; if the vertical side is overflowing it will add a scroll bar to the bottom; if both are overflowing both the scroll bars will be added.visible
- any overflow is visible
The default value for overflow
, visible
makes the overflow visible, i.e everything is shown flowing out of the element.
Now you already know how visible
works but just for the sake of an example consider the following:
div {
overflow: visible;
}
Seperate overflows
Extending the examples shown above, what if we ask you that we want to scroll the overflows horizontally whereas hide them vertically. In other words what if we wanted to set overflow: scroll
on the horizontal axis and overflow: hidden
on the vertical one?
Well we can use the properties overflow-x
and overflow-y
or the same overflow property with two parameters to get this accomplished.
overflow-x
states the behavior of overflows in the x-direction i.e horizontal direction.
overflow-y
states the behavior of overflows in the y-direction i.e vertical direction.
Following we solve the problem discussed at the start of this section using these two properties:
div {
overflow-x: scroll;
overflow-y: hidden;
}
As you can distinguish by looking at this example, only the horizontal overflow is scrollable - the vertical is chopped off.