If we create any element in HTML and don't specify any limits then it will expand based on its content. But if we want to limit the dimensions of the element by giving it width and height properties we will be in trouble as the content grows bigger. Let's create a div element and put some text. As you can see in this case the text is well within the limits of the the div element so all works out great.
<html>
<head>
<title>CSS Overflow Property tutorial</title>
<style type="text/css">
div#overflow {
width:300px;
height:150px;
background: #b0c4de;
}
</style>
</head>
<body>
<div id="overflow">
<p>
HyperText Markup Language (HTML) is the main markup language for web pages.
HTML elements are the basic building-blocks of webpages.
</p>
</div>
</body>
</html>
Now let's make the text much larger than the div element content area.
<html>
<head>
<title>CSS Overflow Property tutorial</title>
<style type="text/css">
div#overflow {
width:300px;
height:150px;
background: #eee9e9;
}
</style>
</head>
<body>
<div id="overflow">
<p>
HyperText Markup Language (HTML) is the main markup language for web pages.
HTML elements are the basic building-blocks of webpages.
HTML is written in the form of HTML elements consisting of tags enclosed
in angle brackets (like <html>), within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>, although some tags, known as empty
elements, are unpaired, for example <img>. The first tag in a pair is the start
tag, the second tag is the end tag (they are also called opening tags and closing
tags). In between these tags web designers can add text, tags, comments and other
types of text-based content.
</p>
</div>
</body>
</html>
As you can see it just overflows into the other areas of the page causing a mess. So how do we solve this, well we have 3 choices
Make the CSS overflow propety to hidden
The overflow part of the content becomes invisible.
<style type="text/css">
div#overflow {
width:300px;
height:150px;
background: #eee9e9;
overflow: hidden;
}
</style>
Make the CSS overflow property to scroll
Content doesn't get lost here, the overflow is not displayed at once but you get a scroll-bar to see the rest of the content
<style type="text/css">
div#overflow {
width:300px;
height:150px;
background: #eee9e9;
overflow: scroll;
}
</style>
Make the CSS overflow property to auto
This is the best option. If there is content overflow you get a scroll-bar otherwise you don't.
<style type="text/css">
div#overflow {
width:300px;
height:150px;
background: #eee9e9;
overflow: auto;
}
</style>
Note: There is another property for overflow know as visible. This is the default if you don't specify any overflow. In this case the overflow content is rendered outside the element's boundaries.
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.