The overflow property in CSS is used to set how content that exceeds the size of the element can be displayed.
For example, if we want to create a text or paragraph in a box frame, where we want to design the box with the desired size.
However, the text or paragraphs in it actually seem to flood the contents of the box.
Consider the following example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Of course, it is very unpleasant to look at.
Then, how to make a design that can overcome the above problems.
Well, in this tutorial we will create an overflow box design using the overflow CSS property.
Before we move on to the tutorial, it would be nice to know the various overflow properties in CSS.
There are four kinds of overflow properties that are often used in CSS, there are:
- visible
- hidden
- scroll
- auto
Let's start with the first one.
1. Visible Overflow
Just as the name suggests, visible overflow is a property used to make the appearance inside an element visible as a whole.
Consider the following program.
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow: visible;
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Will display results like this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
From the program above, we set a width element with 250px.
So, the text or paragraph inside the element will follow its width, which is 250px.
Then the rest will overflow and the writing will still appear outside the element box.
2. Hidden Overflow
In this hidden overflow property, text or paragraphs that exceed the element's size will be truncated and hidden.
Consider the following program.
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow: hidden;
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Will display results like this
We cannot scroll the text inside the element or see it as a whole.
3. Scroll Overflow
In this scroll overflow property, if the text or paragraph contained in it exceeds the size of the element, then the text will be cut and the element will provide a scrollbar that serves to see the entire text that was cut off.
Consider the following program.
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow: scroll;
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Will show the following results.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
In this Scroll Overflow property, by default, the element will provide two scrollbar functions, there are Scrollbar overflow-x and scrollbar overflow-y.
4. Auto Overflow
Auto overflow is a property used to provide a scrollbar function to elements that contain excess content.
Consider the following program
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow: auto;
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Will show the following results.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This auto overflow will provide an auto scrollbar.
The point is that if the excess text appears vertically, it will automatically provide an overflow-y scrollbar.
And conversely, if the excess text appears horizontally, an overflow-x scrollbar will automatically be provided.
And if the text is not excessive on one side, then the scrollbar is automatically not rendered.
Overflow-x and overflow-y
In addition to using the auto property, we can also define our own overflow properties using overflow-x and overflow-y.
Using the overflow-x property, the element will provide a horizontal scrollbar.
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow-x: scroll; /* Add horizontal scrollbar */
overflow-y: hidden; /* Hide vertical scrollbar */
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Meanwhile, for the overflow-y property, the element will provide a scrollbar vertically.
< style>
.container{
width: 350px;
height: 150px;
padding: 15px;
border: 2px solid black;
border-radius: 9px;
color: darkblue;
background-color: #e9ecef;
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
</ style>
< div class="container">
< p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</ p>
</ div>
Post a Comment
Post a Comment