FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area. If content is too large to fit within an element then we can handle it using overflow property of CSS. The overflow property has the following values:
Note: If we are not specifying the height of the block element then overflow property will not work.
Visible is the by default value of overflow. The content flows outside the specified size of element.
CSS Code
div
{
width: 10px;
height: 50px;
background:#99FFCC;
overflow: visible;
}
The content is clipped within the element dimension, and the excess content will be invisible.
.hidden
{
background:#99FFCC;
width:400px;
height:50px;
overflow:hidden;
}
The content is clipped within the element dimension. But a scrollbar is attached to the element to see the excess content. This will add a horizontally and vertically scrollbar.
Note: If you want only horizontal or vertical scrollbar then use overflow-x or overflow-y property.
.Scroll
{
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#99FFCC;
width:400px;
height:50px;
overflow:scroll;
}
The auto value is same to scroll, but horizontal or vertical scrollbar will display when required.
CSS CODE
.auto
{
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#99FFCC;
width:400px;
height:50px;
overflow:auto;
}
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Overflow Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="normal"> your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks.When you create pictures, charts, or diagrams, they also coordinate with your current document look.</div>
<br>
<div class="fiexedWidthHeight"> You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home</div>
<br><br><br>
<div class="hidden"> Most controls offer a choice of using the look from the current theme or using a format that you specify directly. your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. </div><br>
<div class="Scroll"> To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. You can use these galleries to insert tables, headers, footers.</div>
<br><br>
<div class="auto"> Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. To change the overall look of your document, choose new Theme elements on the Page Layout tab.</div>
</body>
</html>
