For working professionals
For fresh graduates
Study abroad
More

CSS Overflow

Updated on 03/03/20241,874 Views

Table of Content

Introduction

CSS overflow is a powerful and versatile property that plays a crucial role in controlling the behavior of content when it exceeds the available space within its container. As websites become more dynamic and responsive, understanding how to manage overflow becomes essential for web developers and designers. Whether it is text, images, or other elements, managing overflow can impact the layout and user experience significantly.

In this tutorial, we will delve into the various aspects of CSS overflow, exploring its different values and practical applications. Get ready to unlock the potential of this property and enhance your CSS skills for more seamless web design.

Overview

CSS overflow is a fundamental property used to control the behavior of content that exceeds the size of its container. It comes into play when elements, such as text, images, or nested elements, surpass the available space within their parent container. By default, overflow content may be hidden, causing potential content truncation.

However, CSS overflow offers various values, such as "visible," "hidden," "scroll," and "auto," each influencing how the excess content is displayed or handled. Understanding and utilizing the CSS overflow effectively is crucial for creating responsive and aesthetically pleasing web designs, ensuring optimal user experiences across different devices and screen sizes.

What is CSS?

Cascading Style Sheets (CSS) is a stylesheet language that defines the layout and presentation of HTML documents. Web designers and developers utilize CSS to easily apply styles directly to HTML elements such as colors, fonts, spacing, and so on– simplifying website page design processes.

CSS allows designers greater creative freedom by decoupling presentation from content, and making style changes across an entire website. CSS has become a crucial component of modern web development due to its impact on aesthetics, user experience, and responsiveness.

Property of Overflow in CSS

CSS's overflow property allows developers to manage how content that overflows its container is displayed or hidden, giving greater control of layout and user experience.

The overflow property can take several values:

1. visible (default): This value allows content to overflow the container without any clipping, potentially overlapping with other elements on the page. This is the default behavior when overflow is not specified.

2. hidden: This value will clip any content that is larger than the container dimensions. This is useful when developers want to hide overflowing content and maintain a clean layout.

3. scroll: This value adds scrollbar(s) to the container when content overflows, enabling users to scroll and view the hidden content. Vertical and/or horizontal scrollbars will appear based on the overflow direction.

4. auto: The "auto" value automatically adds scrollbars to the container when necessary, based on the content overflow. If there is no overflow, no scrollbars are displayed.

Using the overflow in CSS property, developers can create responsive and user-friendly designs. It helps prevent layout issues caused by content overflow and provides an efficient way to manage large amounts of content within limited space. By choosing the appropriate overflow value, developers can optimize the presentation of their websites and enhance the overall user experience.

CSS Overflow: Visible

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 69px;
  border: 1px solid;
  overflow: visible;
}
</style>
</head>
<body>

<h2>Overflow: visible in upGradTutorial</h2>

<p> The overflow is visible by default, meaning that there is no clipping and that it renders outside the element's box:</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box.</div>

</body>
</html>

CSS Overflow: Hidden

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 50px;
  border: 1px solid black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Overflow: hidden in upGradTutorial</h2>

<p> The overflow is clipped with the hidden value while the rest of the content is hidden:</p>
<p>You can try removing the overflow property to understand how it works.</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box. </div>

</body>
</html>

CSS Overflow: Scroll

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 90px;
  border: 1px solid black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>Overflow: scroll in upGradTutorial</h2>

<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. 
It should be noted that this will adds scrollbars both horizontally and vertically (even if it is not needed):</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box.</div>

</body>
</html>

CSS Overflow: Auto

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 69px;
  border: 1px solid black;
  overflow: auto;
}
</style>
</head>
<body>

<h2>Overflow: auto in upGradTutorial</h2>

<p>The auto value functions like scroll, the only difference is that it add scrollbars whenever necessary:</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box.</div>

</body>
</html>

CSS Overflow-x and CSS Overflow-y

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 69px;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>Overflow-x and overflow-y in upGradTutorial</h2>

<p>You can choose to change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.</p>
<p>overflow-y specifies what to do with the top/bottom edges of the content.</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box.</div>

</body>
</html>

Overflow Shorthand

In CSS, the overflow property is used to control what happens when the content of an element overflows its box. It can be used in shorthand form to set both the overflow-x and overflow-y properties at the same time. The general syntax for the shorthand property is:

/* The 'overflow' shorthand property */

overflow: overflow-x overflow-y;

where overflow-x specifies the behaviour for horizontal overflow and overflow-y specifies the behaviour for vertical overflow. The possible values for overflow-x and overflow-y are:

visible: The content overflows the box but is still visible outside of it.
hidden: Any content that overflows the box will be clipped and hidden.
scroll: Always show a scrollbar, whether the content overflows or not.
auto: Show a scrollbar only if the content overflows the box.
inherit: Inherits the overflow value from the parent element.

Here are some examples of the overflow shorthand property:

/* Horizontal and Vertical overflow are 'visible' */

.element {
  overflow: visible;
}

/* Horizontal and Vertical overflow are 'hidden' */

.element {
  overflow: hidden;
}

/* Horizontal and Vertical overflow are 'scroll' */

.element {
  overflow: scroll;
}

/* Horizontal and Vertical overflow are 'auto' */

.element {
  overflow: auto;
}

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: coral;
  width: 220px;
  height: 69px;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>

<h2>Overflow-x and overflow-y in upGradTutorial</h2>

<p>You have the option to change the overflow of content horizontally or vertically.</p>
<p>overflow-x specifies what to do with the left/right edges of the content.</p>
<p>overflow-y specifies what to do with the top/bottom edges of the content.</p>

<div>The overflow property can be used when you wish to have better control of the layout. This property can define or specify what happens when content overflows an element's box.</div>

</body>
</html>

CSS Overflow: Wrap

Code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 140px; 
  border: 1px solid #000000;
}
div.a {
  overflow-wrap: normal;
}
div.b {
  overflow-wrap: break-word;
}
div.c {
  overflow-wrap: anywhere;
}
</style>
</head>
<body>
<h1>The overflow-wrap Property in upGradTutorial</h1>
<h2>overflow-wrap: normal (default):</h2>
<div class="a">This div contains a very long word: thisisaveryveryveryveryveryverylongword. 
The long word will not break and wrap to the next line.</div>
<h2>overflow-wrap: break-word:</h2>
<div class="b">This div contains a very long word: thisisaveryveryveryveryveryverylongword. 
The long word will break and wrap to the next line.</div>
<h2>overflow-wrap: anywhere:</h2>
<div class="c">This div contains a very long word: thisisaveryveryveryveryveryverylongword. 
The long word will break and wrap to the next line.</div>
</body>
</html>

Overflow in CSS Table

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<h2>Overflow in CSS Table in upGradTutorial</h2>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> 
around the table element:</p>
<div style="overflow-x: auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Ram</td>
      <td>Kumar</td>
      <td>40</td>
      <td>40</td>
      <td>40</td>
      <td>40</td>
    </tr>
    <tr>
      <td>Lakhman</td>
      <td>Kumar</td>
      <td>96</td>
      <td>96</td>
      <td>96</td>
      <td>96</td>
    </tr>
    <tr>
      <td>Bharat</td>
      <td>Kumar</td>
      <td>65</td>
      <td>65</td>
      <td>65</td>
      <td>65</td>
    </tr>
  </table>
</div>
</body>
</html>

Conclusion

Understanding CSS's overflow property is key for web developers and designers seeking to craft visually appealing yet user-friendly websites. By controlling how content reacts when it exceeds its container boundaries, developers can ensure a seamless layout across devices and screen sizes while offering users an optimal user experience. Mastering this property empowers developers to tackle various layout challenges and enhance the presentation of their web pages.

FAQs

What is the purpose of the overflow property in CSS?

The overflow property controls the behavior of content that exceeds its container. It helps manage how excess content is displayed, hidden, or accessed through scrollbars.

What is overflow in CSS table?

The overflow CSS property can be applied to the table element. It controls the behavior of the table's contents when they exceed the container dimensions. This gives developers control over the way the table content will appear or disappear when it overflows. This allows better management and display of large tables on limited web page space.

Does the overflow property only apply to text overflow in CSS?

The overflow CSS property is not just for text. You can apply it to any HTML element, regardless of whether the content is text, images, or other elements.