To hide overflow in CSS, you can use the overflow
property. The overflow
property specifies what should happen if content overflows an element's box.
Here's how you can control the overflow:
Hide Overflow for Both Axes:
If you want to hide the overflowed content for both the horizontal and vertical axes, you can set the overflow
property to hidden
.
.element {
overflow: hidden;
}
Hide Overflow for Specific Axes:
Horizontal Overflow: To hide only the horizontal overflow, use the overflow-x
property.
.element {
overflow-x: hidden;
}
Vertical Overflow: To hide only the vertical overflow, use the overflow-y
property.
.element {
overflow-y: hidden;
}
Using Scrollbars:
If you want to display scrollbars instead of hiding the overflowed content:
- For both axes:
.element {
overflow: auto;
}
- For horizontal axis only:
.element {
overflow-x: auto;
}
- For vertical axis only:
.element {
overflow-y: auto;
}
The auto
value will display scrollbars only when the content overflows the container. If the content fits within the container, no scrollbars will be shown.
Remember, when using overflow: hidden;
, ensure that no essential content is being cut off or made inaccessible to users.