# 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; }`

:

## See also

- the `word-break` property
  that allow you to move the letters of a long word to a new line
- the `overflow-wrap` property
  that also allows you to wrap the letters of a long word to a new line
- the `overflow-x` property
  that cuts off content overflowing horizontally
- the `overflow-y` property
  that cuts off content overflowing vertically

← →
↑
en ru