×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS Position property (absolute | relative | static | fixed ) CSS Button property applies color effect on button using CSS.
CSS Overflow Property | excess text in a div - CSS 3.0
2783    Arnab De    11/05/2017

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.

softetechnologies

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.

softetechnologies

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

softetechnologies

<!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
CSS Position property (absolute | relative | static | fixed ) CSS Button property applies color effect on button using CSS.
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.
Enter New Comment
Comment History
No Comment Found Yet.
Sri Sri Ramakrishna Paramahamsa
Do yourself what you wish others to do.
Sri Sri Ramakrishna Paramahamsa
568
39.03
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     34343
26/05/2018     31115
28/06/2017     31000
02/08/2017     29004
25/06/2018     26387
15/05/2017     24658
01/08/2017     23608
06/07/2017     23257
21/04/2018     19248
14/07/2017     18573
softetechnologies