introduction
- Introduction to CSS
- How and where to write CSS?
- CSS Selectors
- Size and Other Units of Measurement
- CSS colors
- Other uses of colour
Formatting Text
Box Model
Advanced selectors
More about CSS
The CSS overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow consists of the following properties:
visible: The content is not clipped and visible outside the element box.
Example:
<html>
<head>
<style>
p {
width: 100px;
height: 80px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>
<h2>
Edupoly Tutorials
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>Output:
hidden: The overflow is clipped and the rest of the content is invisible.
Example:
<html>
<head>
<style>
p {
width: 100px;
height: 80px;
border: 1px solid;
overflow: hidden;
}
</style>
</head>
<body>
<h2>
Edupoly Tutorials
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>Output:
scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Example:
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
}
</style>
</head>
<body>
<h2>
Edupoly Tutorials
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>Output:
auto: It automatically adds a scrollbar whenever it is required.
Example:
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: auto;
}
</style>
</head>
<body>
<h2>
Edupoly Tutorials
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>Output:
overflow-x and overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.
Example:
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow-x: scroll;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>
Edupoly Tutotirals
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>Output: