CSS Overflow Property | excess text in a div
11-05-2017    592 times
CSS Overflow Property

CSS Overflow property

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:

  • Visible
  • Hidden
  • Scroll
  • auto

Note: If we are not specifying the height of the block element then overflow property will not work.

visible

Visible is the by default value of overflow. The content flows outside the specified size of element.

Tutorial at home

CSS Code

div
{
width: 10px;
height: 50px;
background:#99FFCC;
overflow: visible;
}

Hidden

The content is clipped within the element dimension, and the excess content will be invisible.

.hidden
{
background:#99FFCC;
width:400px;
height:50px;
overflow:hidden;
}

Scroll

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.

Tutorial at home

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

Auto

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

Tutorial at home
Tutorial at home

<!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>

css overflow
CSS Overflow Demo
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post