CSS and Overflow

css CSS and Overflow Overflow Hidden

CSS Overflow

When content is too large then. This property set the content by adding scroll bar or using other values of overflow property.

Example of Overflow

we apply "scroll" value of property overflow we apply "scroll" value of overflow property we apply "scroll" value of overflow property we apply "scroll" value of overflow property we apply "scroll" value of overflow property we apply "scroll" value of overflow property we apply "scroll" value of overflow property

Overflow Property values

- scroll - auto - hidden - unset - visible - inherit

Overflow scroll

Example

<style>
div {
    background-color: #BC8F8F;
    width: 250px;
    height: 100px;
    overflow: scroll;
     border: 1px solid gray;
}
</style>
<p>The <b>scroll</b> value of overflow property can cut the overflow text and creat scroll at the horizontal and vertical side.</p>

<p><b>important</b> it creat scroll bar every time even if you don,t require.</p>

<h2> Overflow property</h2>

<div>
This text  is used for create scrolling
This text  is used for create scrolling
This text  is used for create scrolling
This text  is used for create scrolling
This text  is used for create scrolling 
This text  is used for create scrolling
This text  is used for create scrolling
This text  is used for create scrolling
</div>

Overflow auto

Example


<style>
div {
    background-color: #C0C0C0;
    width: 250px;
    height: 100px;
    overflow: auto;
     border: 1px solid gray;
}
</style>


<h2> Overflow property</h2>
<p>The <b>auto</b> value of overflow property can work like  
 scroll but it enable scroll where necessary</p>
<div>
<p style="color:#0000FF">
Insert more lines of text to see the difference between scroll and auto value.
</p>
</div>

Overflow Hidden

Example


<style>
div {
    background-color: #00FFFF;
    width: 250px;
    height: 100px;
    overflow: hidden;
     border: 1px solid gray;
}
</style>
<h2> Overflow property</h2>
<p>The <b>hidden</b> value of overflow can hidden the overflow text   </p>
<div>
<p style="color:#778899">
overflow: hidden is used<br>
overflow: hidden is used<br>
overflow: hidden is used<br>
overflow: hidden is used<br>
overflow: hidden is used
</p>
</div>

Overflow Visible

Example


<style>
div {
    background-color: #6B8E23;
    width: 250px;
    height: 100px;
    overflow: visible;
     border: 1px solid gray;
}
</style>
<h2> Overflow property</h2>
<p>The <b>visible</b> value of overflow cannot clipped the overflow text and  show the overflow text out side the box   </p>
<div>
<p>
overflow: visible is used<br>
overflow: hidden is used<br>
overflow: hidden is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: hidden is used<br>
overflow: hidden is used
</p>
</div>

Overflow on axis

Example


<style>
div {
    background-color: #6B8E23;
    width: 250px;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid gray;
}
</style>
<h2> Overflow property</h2>
<p>You can see that scroll bar is present at x-axis but hideen at y-axis  </p>
<div>
<p>
overflow: visible is used<br>
overflow: hidden is used<br>
overflow: hidden is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: visible is used<br>
overflow: hidden is used<br>
overflow: hidden is used
</p>
</div>

css Overflow Hidden Chapter Next »