Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Working with CSS Overflow Property
CSS overflow property comes in handy when the user wants to display a larger content in a smaller container without resizing the content. This property allows user to clip content, provide scrollbars to view clipped content, render content outside the container thus the name overflow.
Syntax
The following is the syntax for CSS Overflow property −
Selector {
overflow: /*value*/
}
The following are the values for the CSS Overflow property −
Sr.No |
Value & Description |
|---|---|
1 |
visible It is the default value, content is not clipped and is rendered outside the element's box, and thus the property name overflow |
2 |
hidden It clips the content that overflows the element's box, clipped content is not visible |
3 |
scroll It clips the content that overflows the element's box, clipped content is visible as scrollbars are also rendered along with the content |
4 |
auto It will automatically render the scrollbars to see the overflowed content |
Overflow auto
The overflow property with the value auto will automatically render the scrollbars to see the overflowed content −
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
Example
Let?s see the example of the CSS overflow property −
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>
Overflow scroll
The overflow property with the value scroll will clip the content that overflows the element's box. The clipped content is visible as scrollbars are also rendered along with the content −
#containerDiv {
margin: 0 auto;
height: 110px;
overflow: scroll;
}
Example
Let?s see the example of the CSS overflow property with the value scroll −
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 110px;
overflow: scroll;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>
Overflow hidden
The overflow property with the value hidden clips the content that overflows the element's box, clipped content is not visible −
div > div {
overflow: hidden;
animation: enter 4s steps(30, end), blinker .65s step-end infinite;
white-space: nowrap;
font-size: 1.4em;;
border-right: 5px solid blue;
}
Example
Let?s see the example of the CSS overflow property with the value hidden −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
font-family: Courier, monospace;
display: inline-block;
}
div > div {
overflow: hidden;
animation: enter 4s steps(30, end), blinker .65s step-end infinite;
white-space: nowrap;
font-size: 1.4em;;
border-right: 5px solid blue;
}
@keyframes enter {
0% {
width: 0%
}
100% {
width: 100%
}
}
@keyframes blinker {
0%, 100% {
border-color: transparent
}
50% {
border-color: blue;
}
}
</style>
</head>
<body>
<div class="typewriter">
<div class="typewriter-text">I love cricket...</div>
</div>
</body>
</html>
98 Views
