The CSS overflow property defines what should happen if content overflows an element’s box.
This CSS overflow property defines whether to clip content or to add scrollbars when an element’s content is too big to fit in a defined area.
Demo:
Syntax:
overflow: visible|hidden|scroll|auto;visible (default) – the overflow is not clipped.
hidden – the overflow is clipped (the rest of the content is invisible).
scroll – the overflow is clipped, but a scroll bar is added to see the rest of the content.
auto – if overflow is clipped, a scroll bar should be added to see the rest of the content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.square1, .square2, .square3, .square4 {
width: 150px;
height: 150px;
border:3px solid #333;
font-size: 13px;
}
.square1 {
overflow: scroll;
}
.square2 {
overflow: hidden;
}
.square3 {
overflow: auto;
}
.square4 {
overflow: visible;
}
</style>
</head>
<body>
<h4>overflow: scroll;</h4>
<div class="square1">He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.</div>
<h4>overflow: hidden;</h4>
<div class="square2">He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week. </div>
<h4>overflow: auto;</h4>
<div class="square3">He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.</div>
<h4>overflow: visible;</h4>
<div class="square4">He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.</div>
</body>
</html>Output:
overflow: scroll;
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
overflow: hidden;
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
overflow: auto;
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
overflow: visible;
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
Enjoy coding!
Read also: