CSS Overflow

The CSS overflow property is used to specify how to handle content that's too large to fit in its container. This is a useful property when dealing with large amounts of content or dynamic sizes.

Basic Usage

There are four values that the overflow property can take:

visible: This is the default value. The content is not clipped, and it renders outside the element's box.
hidden: The content is clipped, and any content that is outside the element's box is not visible.
scroll: The content is clipped, but a scrollbar is added to see the rest of the content.
auto: Similar to scroll, but the scrollbar only appears when necessary.

Here is an example of how to use overflow:

css

.container {
  width: 200px;
  height: 200px;
  overflow: auto;
}

In this example, if the content inside .container exceeds 200px in either width or height, scrollbars will appear to allow users to scroll to view the content.

Overflow in X and Y Directions

CSS also provides two properties overflow-x and overflow-y that allow you to specify how overflow is handled in the horizontal (x) and vertical (y) directions respectively.

For example:

css

.container {
  width: 200px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

In this example, if the content inside .container exceeds 200px in width, it will be clipped and not visible. If it exceeds 200px in height, a vertical scrollbar will appear.

Using Overflow with Text

The overflow property can be particularly useful when dealing with text content. For instance, you might want to limit the display of a block of text to a certain number of lines. In combination with other properties like text-overflow and white-space, you can control how overflowed text content is displayed:

css

.container {
  width: 200px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

In this example, if the text inside .container exceeds the width of the container, it will be cut off and an ellipsis (...) will be displayed to indicate that there is more content.

Remember, the CSS overflow property is a powerful tool for controlling how content is displayed when it overflows its container. Use it wisely to improve the usability and aesthetics of your web pages.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

CSS Grid

CSS Pagination