Normally, if you write some text in a div or any element, then the dimensions of that element expands depending upon the area covered by the text so as to accomodate it. But as soon as you give a constraint to the width or height of the element, a scroll bar appears if its content cannot fit inside it. The vertical scroll bar that you see in this page is because the page content is exceeding the window height.
This is the case of default scrollbars. You can control the way an element's content behaves when it overflows the element's box using CSS overflow property.
Overflow Values
visible : This is the default value. It renders the content outside the element's box i.e. it does not force the content inside the box.
hidden : Overflowing content is hidden.
scroll : Adds scroll bars and hides overflowing content which can be seen using the scroll bars.
auto : Adds scroll bars if necessary.
initial : Sets the default value.
inherit : Sets the value as that of its parent element.
Now let's see how each of these values affect your content.
visible
overflow: visible lets the content overflow if it exceeds its container's dimensions. The overflowing content does not affect the normal layout.
HTML
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>
CSS
#box {
width: 200px;
height: 100px;
background-color: #FD2D0F;
overflow: visible;
}
The width and height of the div is set to 200px and 100px respectively. So, if its content exceeds the size of the block, it overflows.
See the Pen QgWvgx by Aakhya Singh (@aakhya) on CodePen.
hidden
overflow: hidden hides all the overflowing content.
See the Pen ZyEKdz by Aakhya Singh (@aakhya) on CodePen.
scroll
This adds scroll bars even if the content is not overflowing. Note that overflow: scroll adds both horizontal and vertical scrollbars.
In the following demo, it added scrolls to both boxes, even when the content is not exceeding the height and width of the second box.
See the Pen JJjJGE by Aakhya Singh (@aakhya) on CodePen.
auto
This is similar to scroll, but only adds a scrollbar when needed. overflow: autoadded vertical scroll bar to the first box whose content is exceeding its height, whereas no scroll bar is added in the second case in the following demo.
See the Pen BZaZJb by Aakhya Singh (@aakhya) on CodePen.
You can also manipulate the way overflowing content behaves in the horizontal and vertical directions separately using two other properties which are explained below.
overflow-x and overflow-y
overflow-x and overflow-y properties controls the way overflowing content appears in horizontal and vertical direction respectively. These can be given all the six values mentioned above.
Let's see an example for both.
HTML
<div id="box">
<div id="inner_box"></div>
</div>
If the width of the outer box is 200px and that of the inner box is 250px, then giving overflow-x: auto to the outer box will add a horizontal scroll bar to it because the width of its content exceed its own.
See the Pen eRYEWe by Aakhya Singh (@aakhya) on CodePen.
Similarly, if the height of the outer box is 100px and that of the inner box is 150px, then giving overflow-y: auto will add a vertical scroll bar.
See the Pen eRYEEy by Aakhya Singh (@aakhya) on CodePen.
Breaking long text
Suppose a single word is exceeding the width of the container, and you want neither to hide the overflowing text nor any scrollbar. In that case, you can break the word and force it to wrap onto a new line using the word-wrap property by simply giving its value break-word.
HTML
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus.
</div>
CSS
#box {
width: 200px;
height: 100px;
background-color: #FD2D0F;
}
On giving word-wrap: break-word, the overflowing word breaks into two so that it can fit inside the container's width as shown below.
See the Pen rwNzdv by Aakhya Singh (@aakhya) on CodePen.
Browser Support
It works fine for all the browsers. IE 4 to 6 expands the container to fit its content.
