CSS - overflow Property

The overflow Property

CSS overflow property specifies how to handle the content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis. The property only works for block-level elements with a specified height or width.

Syntax

The syntax for the CSS overflow property is as follows:

 overflow: visible | hidden | clip | scroll | auto | initial | inherit;

Property Values

Value	Description
visible	The content is not clipped and will overflow the container.
hidden	The content is clipped and the overflow is not visible. There are no scroll bars, and the clipped content is not visible.
clip	The content is clipped when it proceeds outside its box.
scroll	A scrollbar is added to the container so that the user can scroll to see the overflowed content.
auto	A scrollbar is added to the container only when the content overflows.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

CSS overflow Property with visible Value

To display the content of an element beyond its size, if the content's length is greater than the element's size, we use the visible value. This is shown in the following example.

Example

In this example, we have used 'overflow: visible;' to display the content that does not fit in the container.

 <!DOCTYPE html> <html> <head> <style> p { height: 100px; width: 200px; background-color: lightgreen; border: 2px solid #031926; overflow: visible; } </style> </head> <body> <h2> CSS overflow property </h2> <h4> overflow: visible </h4> <p> TutorialsPoint is an online learning platform offering a wide range of tutorials, courses, and resources in programming, web development, data science, and more, catering to beginners and advanced learners alike. </p> </body> </html>

Hide Overflowing Content with overflow:hidden

To only show the content that fits the container, we use the hidden value with the overflow property. The layout of the page will still be affected as the value only hides the extra content but does not remove the space occupied by it. This is shown in the following example.

Example

In this example, we have used 'overflow: hidden;' to hide the content that does not fit in the container.

 <!DOCTYPE html> <html> <head> <style> p { height: 100px; width: 200px; background-color: lightgreen; border: 2px solid #031926; overflow: hidden; } </style> </head> <body> <h2> CSS overflow property </h2> <h4> overflow: hidden </h4> <p> TutorialsPoint is an online learning platform offering a wide range of tutorials, courses, and resources in programming, web development, data science, and more, catering to beginners and advanced learners alike. </p> </body> </html>

Clip Overflowing Content Using CSS overflow: clip

The clip value is similar to the hidden value as it also only shows the content that fits the container. The difference is that the layout of the page will not be affected as now you can not access the clipped portion. This is shown in the following example.

Example

In this example, we used 'overflow: clip;'to clip the content that did not fit in the container.

 <!DOCTYPE html> <html> <head> <style> p { height: 100px; width: 200px; background-color: lightgreen; border: 2px solid #031926; overflow: clip; } </style> </head> <body> <h2> CSS overflow property </h2> <h4> overflow: clip </h4> <p> TutorialsPoint is an online learning platform offering a wide range of tutorials, courses, and resources in programming, web development, data science, and more, catering to beginners and advanced learners alike. </p> </body> </html>

Add Scrollbars Using CSS overflow: scroll

To see the overflowed content of the container, you can use the scrollbar using the scroll value of the overflow property. It is useful when you want to fit the content in the existing container and you don't want to clip or hide the content. This is shown in the following example.

Example

In this example, we have used 'overflow: scroll;' to show the content that does not fit in the container with the help of a scrollbar.

 <!DOCTYPE html> <html> <head> <style> p { height: 100px; width: 200px; background-color: lightgreen; border: 2px solid #031926; overflow: scroll; } </style> </head> <body> <h2> CSS overflow property </h2> <h4> overflow: scroll </h4> <p> TutorialsPoint is an online learning platform offering a wide range of tutorials, courses, and resources in programming, web development, data science, and more, catering to beginners and advanced learners alike. </p> </body> </html>

CSS overflow Property with auto Value

To add scroll-bars to an element only if its content exceeds the element's size, you can use the auto value. If the content fits well within the size of the element, no scroll bars will be added. This is shown in the following example.

Example

In this example, we have used 'overflow: auto;' to add scrollbars to the container only when the content overflows.

 <!DOCTYPE html> <html> <head> <style> p { height: 100px; width: 200px; background-color: lightgreen; border: 2px solid #031926; overflow: auto; } </style> </head> <body> <h2> CSS overflow property </h2> <h4> overflow: auto </h4> <p> TutorialsPoint is an online learning platform offering a wide range of tutorials, courses, and resources in programming, web development, data science, and more, catering to beginners and advanced learners alike. </p> </body> </html>

Supported Browsers

Property
overflow	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page