CSS Overflow
The CSS property called overflow manages what occurs when something is too large to fit in a particular space.
This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
CSS Overflow
The overflow property decides what to do when there's too much content for a specific space. It can either cut off the extra content or display scrollbars to let you see the hidden part.
The overflow property can take on these values.
- "
visible - This is the default setting. It means that when there's too much content to fit inside an element, it won't be cut off.
hidden - This hides the extra content that doesn't fit within the specified width and height.scroll - When there's too much stuff on a webpage, the extra stuff gets hidden, and a little slidey bar appears so you can look at the hidden stuff.auto - Like scroll,
but it only shows scrollbars when they are needed.
overflow: visible
By default, overflow is set to visible which means that content is not hidden and can extend beyond the boundaries of the element's box:
In HTML, the 'overflow' property helps you control how content appears within an element. It decides what occurs when the content inside an element exceeds the element's dimensions.
Example
div {
width: 200px;
height:
65px;
background-color: coral;
overflow: visible;
}
Try it Yourself »
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
You can use the "overflow" property to control how things are displayed on a webpage. This property tells the browser what to do if the content inside a box is too big to fit.
overflow: scroll
When you set the value to scroll, it means that if the content inside a box is too much to fit, the extra content will be hidden, and scrollbars will appear so you can scroll both horizontally and vertically to see the hidden content.
You can use the "overflow" property to control how content behaves within an element's box. This property defines what should occur when the content exceeds the designated space.
overflow: auto
The 'auto' setting is like The auto but it only shows scrollbars when they are needed:
You can use the "overflow" property to control how things are displayed. It tells us what to do if the stuff inside a box is too much to fit in that box.
overflow-x and overflow-y
The overflow-x and overflow-y properties decide whether to control the overflow of content in two ways: horizontally or vertically, or both.
overflow-x tells us how to handle the content's left and right edges.
overflow-y tells us how to handle the content's top and bottom edges.
You can use the "overflow" property to control how things appear on a webpage. This property tells the webpage what to do if the content doesn't fit inside a certain area.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>The default setting for overflow is "visible," which means that content is not cut off and appears outside the element's box.</p>
<div>You may utilize the overflow property to gain more control over the arrangement of your content. This property determines the outcome when the content exceeds the boundaries of an element's box.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Overflow: hidden</h2>
<p>With the concealed value, excess content gets cut off, and the remaining part of the content stays hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>
<div>Use the overflow property to control the layout more effectively. This property determines the outcome when the content exceeds the box of an element.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Overflow: scroll</h2>
<p>If you set the overflow to scroll, it means the content that exceeds the box size will be clipped, and a scrollbar will appear for scrolling within the box. It's important to note that this will introduce both horizontal and vertical scrollbars, even if one of them is not required.</p>
<div>If you want to better control how content is displayed, you can use the "overflow" property. This property determines what should occur if the content exceeds the boundaries of an element's box.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<h2>Overflow: auto</h2>
<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>
<div>You may employ the overflow property for improved layout control. This property determines the outcome when content exceeds the boundaries of an element's box.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-x and overflow-y</h2>
<p>You have the option to modify the overflow of content either horizontally or vertically.</p>
<p>Overflow-x determines how the content behaves at its left and right edges.</p>
<p>overflow-y determines how the content's upper and lower edges should be handled.</p>
<div>If you want more control over how things are arranged on a webpage, you can use the "overflow" property. This property determines what should occur if the content extends beyond the boundaries of a specific element's box.</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL