The overflow property

The overflow property tells the browser what to do with content (text, images, other blocks) that extends beyond the boundaries of the block (beyond its width or height). The browser can hide the overflowing content part, add scroll bars or do nothing (leave it as it is - going out of borders).

Syntax

selector {
	overflow: hidden | scroll | auto | visible;
}

Values

Value	Description
`hidden`	Hides content that extends beyond the boundaries of a block.
`scroll`	Adds scroll bars, always, even if nothing is displayed (in this case ones will be disabled).
`auto`	Adds scroll bars if necessary: if the content does not fit, they will appear, if everything fits, they will not appear.
`visible`	Does not hide content that extends beyond the boundaries of a block.

Default value: visible.

Example . The visible value

In this example, a very long word will not fit into the container and will fall outside its boundaries. No cutting off occurs:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Example . The visible value

And now not only the width is limited, but also the height (a text will extend beyond the block and in height):

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Example . The hidden value

Now everything that has gone beyond the boundaries of the container will simply be cut off (and in height too). Please note that height trimming occurs only when it is explicitly specified. Otherwise, the text expands the container in height - and there will be no trimming:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Example . The scroll value

With the scroll value, scroll bars will always be there, even if nothing is displayed (in this case they will be inactive). Now the text does not extend either in width or height, but the scroll bars are still there (inactive):

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Example . The auto value

When set to auto, scrollbars are added only if the content extends beyond the container. Now they are gone, as everything fits:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Example . The auto value

Now let's limit a width - a horizontal scroll bar will appear:

<div id="elem">
	Lorem ipsum dolor sit amet
	vvvvvvvvvvvvvvvvvvvvvveeeeeeeeeeeeeerrrrylongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

The overflow property

Syntax

Values

Example . The visible value

Example . The visible value

Example . The hidden value

Example . The scroll value

Example . The auto value

Example . The auto value

See also