Complete Guide To CSS Overflow

Creating a high-quality product is the end goal of all organizations. But developers face many CSS layout issues irrespective of whether it’s built from scratch or customized pre-designed ones. For example, imagine you are trying to position something, and all of a sudden, the margin doesn’t work, image size is reduced, or disappears, or elements are not placed right.

Assume you have images in the middle of your homepage for every container. Beneath that, you have a div element that contains the narrative. It looks similar to the LambdaTest Website.

Complete Guide CSS Overflow Article Image 1

Now imagine that one of the images of a bigger size. That would make the image box too small to fit inside its particularized area and possibly cause it to overlap with different elements on the page. This is known as overflow in CSS.

Complete Guide CSS Overflow Article Image 2

What Is Overflow In CSS?

CSS consists of boxes. The dimension of these boxes can be changed as per the requirement (or inline-size and block-size). In CSS, overflow happens when any content becomes too big for an element box. This could also happen when the block element’s dimensions are too small for the content it contains. We can use the CSS overflow property to manage what happens to the overflowing data/images.

Let’s assume, there is a div container of fixed dimensions having some content inside it. The content turns out to be bigger than the available space in the container, so the content will come out of the div. Since the container has fixed dimensions and might disturb the website’s layout, we cannot improvise the height or width. In situations where we cannot change the dimensions of the parent element, the Overflow Property of CSS can be used.

Let’s examine two examples that explain the default behavior of CSS when there is overflow.

In the first example, let’s take a box where it’s height has been restricted. Later we add content that surpasses the allocated space. Finally, the content will overflow the box and falls into the section below.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <div class=”box”>
  8. CSS Overflow Property: This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. By default the overflow is visible, unless it is not set to hidden then any overflow will not be visible.
  9. </div>
  10. <p>This content is outside of the box.</p>
  11. </body>

CSS

  1. .box {
  2. border: 1px solid #333333;
  3. width: 200px;
  4. height: 100px;
  5. }

Complete Guide CSS Overflow Article Image 3

In the second example, there is a word inside a box. Unfortunately, the box size does not suffice the word, and it breaks out of the box.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <div class=”word”>LambdaTest</div>
  8. </body>

CSS

  1. .word {
  2. border: 1px solid #333333;
  3. width: 100px;
  4. font-size: 250%;
  5. }

Complete Guide CSS Overflow Article Image 4

You might have numerous questions concerning why CSS works in such a disordered way, displaying content outside of its intended container. For example, why does it not hide overflowing content? Why can we not modify the size of the container to accommodate all the data?

CSS makes sure that they don’t hide content. This would lead to data loss. There are many problems with data loss that you might overlook, or even the website visitors may not see. For example, consider that if the submit button on a form is not visible or disappears, no one can submit the form. This could be a big problem! But in the case of CSS overflows, it will always be visible. So you are more likely to find out if there is any mistake. At most critical, a site visitor will inform you about the content overlapping.

If you restrain the size of a container concerning width or height, CSS assumes that you have thought about the potential overflow and you are managing it. Overall, restricting the size of the block is problematic when the box contains the text/images. For example, there may be more text than you foresaw when designing the site, or there might be an increase in the font size, or the size of the image would have changed significantly.

There are several methods for controlling the size of the content in many ways that are less prone to overflow. Yet, if you need the size to be fixed, we can also control how the overflow functions.

“CSS text-overflow” can be used in various conditions like –

  • It allows making the overflown texts visible in the available areas.
  • To hide the overflowing text.
  • To wrap the text.
  • When the area has to be made scrollable.

CSS Overflow Property

The CSS overflow property gives you the power to control the overflow. You are basically commanding the browser how it should behave. By default, when the content overflows, we can see the content. Other options are, you can let the content render outside the element’s box, trim the content, or decrease the content and add a scrollbar. For this, you have to use the specific overflow property values.

Values

  • visible: The data is not clipped when it continues outside its box. It is the default value of the property.
  • hidden: Here, the overflowing content will be hidden.
  • scroll: Alike hidden, but users will be able to scroll through the hidden data.
  • auto: If the data continues outside its box, then that data will be covered, while a scroll bar is added so that the users can see the rest of the data.
  • inherit: The overflow value is set the same as its parent component.
  • initial: It uses the default value, which is visible.

CSS Overflow Visible

When we set the overflow property to “visible”, it means that the overflow will not be cropped. Instead, it will render outside the container and probably overlap the next available area or box on the page. By default, the CSS overflow property is set to visible. This means, there is no need to set the CSS overflow property to “visible” unless you wish to override CSS in an external stylesheet or somewhere on your site. It is automatically implemented by the browser when data overflow is identified.

Syntax

  1. overflow:visible;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <div class=”visible”>If this data does not fit in this area, then this data will overflow to the next available area and will be visible there. In this, the overflown content will be present in the next div whose class name is “default”</div>
  8. <div class=”default”>
  9. </div>
  10. <p><b><u>Note:</u></b> The overflown content of the first div is still visible in the second div </p>
  11. </body>
  12. </html>

CSS

  1. .visible {
  2. width: 250px;
  3. height: 80px;
  4. color:burlywood;
  5. background-color: red;
  6. font-family: Arial;
  7. overflow:visible;
  8. }
  9. .default {
  10. width:250px;
  11. height: 100px;
  12. background-color: blue;
  13. font-family: Arial;
  14. }

Here’s the result.

Complete Guide CSS Overflow Article Image 5

In the result above, we can see the overflowed data is visible outside the edges of the container. The default property is overflow: visible; even if we do not apply it, the result will be the same.

CSS Overflow Hidden

When we set the overflow property to “hide” we hide the extra content that cannot fit in the allotted area and goes outside the dimensions of the container. The content will then be clipped and hidden from the container’s padding edge and not permit the user to view the content ahead of that edge by scrolling or dragging on a touch screen or any alternative means.

This is particularly useful for dynamic content and the possibility of an overflow causing severe layout problems. However, using Overflow Hidden can result in loss of information. As the overflowed content is clipped, users can only read the visible part of the container’s content. They cannot access or read whatever is hidden due to overflow. So, for example, if a user has set its default font size bigger than you would assume, the text will be pushed outside of the box and entirely hidden from their view.

Syntax

  1. overflow:hidden;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <div id=”overflow-invisible”> When you want to hide the extra content which does not fit in the container area, then use overflow-hidden property. Normally, if we have some optional information which does not fit the content area, then we can make it as hidden.
  8. </div>
  9. </body>
  10. </html>

CSS

  1. #overflow-invisible
  2. {
  3.  background-color: pink;
  4.  width: 300px;
  5.  height: 50px;
  6.  padding:10px;
  7.  overflow: hidden;
  8. }

Here’s the result.

Complete Guide CSS Overflow Article Image 6

In the result above, we can see the overflowed data is hidden. Any content that is going outside the edges of the container gets hidden. We face the problem of loss of information here.

CSS Overflow Scroll

When we set the overflow property to “scroll” we hide overflowing data from rendering outside the container but at the same time enable users to view that data. The overflow will still be clipped at the container’s padding edge. However, a scrollbar or paneer will be added inside the container so that users can scroll to see the content that’s not visible.

The scroll property will, by default, add a scrollbar in the horizontal and vertical direction; it does not care if the content overflows or not. But it does not look good to have scrollbars; even if there is no overflow, then the scroll bars should be hidden.

Syntax

  1. overflow:scroll;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <div class=”overflow-scroll”>When you code overflow:scroll, then it will add a vertical scrollbar along the right side border & a horizontal scrollbar along the bottom side border even if we do not have a overflow happening.
  8. </div>
  9. </body>
  10. </html>

CSS

  1.  .overflow-scroll
  2.  {
  3.    background-color: pink;
  4.    width: 200px;
  5.    height: 80px;
  6.    padding:5px;
  7.    overflow: scroll;
  8.    font-size: large;
  9.  }

Here’s the result.

(Awaiting Video)

In the result above, we can see the overflowed data is not visible outside the edges of the container. But there are two scrollbars added using which we can see the hidden content.

CSS Overflow Auto

When we set the overflow property to “auto” it behaves similar to the scroll property but only adds a scrollbar when the container has an overflow. This means that it will not add a vertical scrollbar if the data does not overflow from the container boundary bar. Still, if the content overflows the content boundary, it will add a vertical scrollbar itself. So it’s an improvement over the overflow scroll property.

Syntax

  1. overflow:auto;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <h3>overflow: auto with Scroll Bar</h3>
  8. <div class=”example1″>In this example we have data that occupies an area larger than the allocated space in the container. Therefore we need to hide the overflowing content and make use of scrollbars in order to see the hidden content. The overflow:auto is applied to both the divs. </div>
  9. <h3>overflow: auto with no Scroll Bar</h3>
  10. <div class=”example2″>In this example we do not have scrollbars as the data fits inside the container.</div>
  11. </body>
  12. </html>

CSS

  1. .example1 {
  2.    background-color: pink;
  3.    width: 165px;
  4.    height: 120px;
  5.    overflow: auto;
  6.  }
  7.   .example2 {
  8.    background-color: pink;
  9.    width: 165px;
  10.    height: 150px;
  11.    overflow: auto;
  12.  }

Here’s the result.

Complete Guide CSS Overflow Article Image 7

In the result above, we can see when we apply overflow: auto to both the containers. Only the container with overflow has scroll bars added, whereas the other container has no scrollbar as the content fits inside it.

We can change the direction of overflow content in the way we want, either horizontally or vertically, with the help of overflow-x and overflow-y properties in CSS.

CSS Overflow-x

With the help of the Overflow-x property, we can manage the horizontal overflow or overflow from the left and right of a container.

Syntax

  1. overflow-x: scroll;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <h3>CSS Overflow-x Property</h3>
  8. <p>We can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I have set overflow-x to scroll so I can scroll from left to right to view the image. But I set the overflow-y to hidden so I can’t scroll up and down.</p>
  9. <div id=”ex1″>
  10. <img src=”http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png”>
  11. </div>
  12. <div id=”ex2″>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
  13. </div>
  14. </body>
  15. </html>

CSS

  1. #ex1 {
  2.    width: 400px;
  3.    height: 200px;
  4.    overflow-x: scroll;
  5.    overflow-y: hidden;
  6.  }
  7.   #ex2 {
  8.    background-color: #EEEEEE;
  9.    box-sizing: border-box;
  10.    width: 400px;
  11.    padding: 30px;
  12.    border: 1px solid #000000;
  13.  }

Here’s the result.

(Awaiting Video)

In the result above, we can see when we apply overflow-x, a scrollbar is added horizontally, and we can manage the overflow from the left and right of the container.

CSS Overflow-y

With the help of the Overflow-y property, we can manage the vertical overflow or overflow from the top and bottom of a container.

Syntax

  1. overflow-y: scroll;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <h3>CSS Overflow-y Property</h3>
  8. <p>We can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I have set overflow-x to scroll so I can scroll from left to right to view the image. But I set the overflow-y to hidden so I can’t scroll up and down.</p>
  9. <div id=”ex1″>
  10. <img src=”http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png”>
  11. </div>
  12. <div id=”ex2″>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
  13. </div>
  14. </body>
  15. </html>

CSS

  1. #ex1 {
  2.    width: 400px;
  3.    height: 200px;
  4.    overflow-x: hidden;
  5.    overflow-y: scroll;
  6.  }
  7.   #ex2 {
  8.    background-color: #EEEEEE;
  9.    box-sizing: border-box;
  10.    width: 400px;
  11.    padding: 30px;
  12.    border: 1px solid #000000;
  13.  }

Here’s the result.

(Awaiting Video)

In the result above, we can see when we apply overflow-y, a scrollbar is added vertically, and we can manage the overflow from the top and bottom of the container.

CSS Overflow wrap

The CSS overflow-wrap property defines various conditions where the browser can break a line of text into numerous lines. If we do not implement this property, a string of text that is too long to fit inside the container will flow outside the container as the text would not break and lead to overflow.

Complete Guide CSS Overflow Article Image 8

In order to implement the overflow-wrap property, the white-space property must allow wrapping. That means the white-space property should be “normal,” “pre-wrap,” and “break-spaces,” or “pre-line.” Usually, it is set to “normal.” Thus, three values can be used to define the overflow-wrap property.

  • normal: The lines only break at unforced breakpoints, like the space among two words.
  • anywhere: The lines may break at forced breakpoints if there are no unforced ones. Assume a URL or a long word may be broken to wrap on the following line. Hyphens are not inserted at the breakpoint. With the value set to anywhere, chances to minimize the number of data overflowing from a line by wrapping the line at a breakpoint is good.
  • break-word: The lines may break at forced breakpoints if there are no unforced ones. Hyphens are not added at the breakpoints. However, with the value set to break-word, chances to reduce the number of content overflowing outside a line after wrapping the line at breakpoint are not counted when computing min-content intrinsic sizes.

Syntax

  1. overflow-wrap: normal | anywhere | break-word;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7. <h3>CSS Overflow Wrap</h3>
  8. <p>The CSS overflow-wrap property is used to define the conditions in which the browser can break a line of text onto many lines. If we do not implement this property, a string of text that is too long to fit inside the container will flow outside the container as the text would not break and lead to overflow.</p>
  9. <p class=”wrap”>This is sample text. <strong id=”ex1″>ThisismoremoremoresampletextThisismoremoremoresampletext. This is.</strong> This is more sample text. This is more sample text.</p>
  10. <p class=”wrap”>This is sample text. <strong id=”ex2″>ThisismoremoremoresampletextThisismoremoremoresampletext. This is.</strong> This is more sample text. This is more sample text.</p>
  11. <p class=”wrap”>This is sample text. <strong id=”ex3″>ThisismoremoremoresampletextThisismoremoremoresampletext. This is.</strong> This is more sample text. This is more sample text.</p>
  12. </body>
  13. </html>

CSS

  1. .wrap {
  2.    width: 200px;
  3.    margin: 5px;
  4.    background: pink;
  5. }
  6. #ex1 {
  7.   white-space: normal;
  8.   overflow-wrap: normal;
  9. }
  10. #ex2 {
  11.   white-space: normal;
  12.   overflow-wrap: anywhere;
  13. }
  14. #ex3 {
  15.   white-space: normal;
  16.   overflow-wrap: break-word;
  17. }

Here’s the result.

Complete Guide CSS Overflow Article Image 9

In the result above, we can see that if there is a long text present inside a small container, the text overflows out of the container, and if we apply the overflow-wrap property to it, the text wraps around and shifts to it the following line.

CSS Text Overflow

The text-overflow determines how the content should be presented to the user whenever content overflows take place.

Usually, there are two approaches to handle such scenarios.

  • Clip – In this approach, we reduce the extra content, and therefore the user won’t be able to see this additional content.
  • Ellipsis – In this approach, we add some dots (like …), and the additional content is shortened.

Syntax

  1. text-overflow: clip;
  2. text-overflow: ellipsis;

Let’s take an example.

HTML

  1. <!DOCTYPE html>
  2. <head>
  3. <title>LambdaTest</title>
  4. <link rel=”stylesheet” type=”text/css” href=”main.css”>
  5. </head>
  6. <body>
  7.  <div class=”overflow-clip”>This enables the EXTTTTTTRRRRRRRRRRRRRAAAAAAASSSSSSSSAAAAAAAAAAAAAAAA text will be clipped. To understand this, set ‘text-overflow:ellipsis’ or  remove ‘overflow-wrap: normal’
  8. </div>
  9. <div class=”overflow-ellipsis”>Note, that the EXTTTTTTRRRRRRRRRRRRRAAAASAAASSSAAAAAAAAAAAAAAAA Texts will be shortened and appended with ‘…’ & the extra content is not shown
  10. </div>
  11. </body>
  12. </html>

CSS

  1. .overflow-clip
  2. {
  3.  background-color: red;
  4.  width: 220px;
  5.  height: 150px;
  6.  padding:5px;
  7.  overflow-wrap: normal;
  8.  overflow: hidden;
  9.  text-overflow: clip;
  10. }
  11. .overflow-ellipsis
  12. {
  13.  background-color: pink;
  14.  width:220px;
  15.  height: 130px;
  16.  padding:10px;
  17.  overflow-wrap: normal;
  18.  overflow: scroll;
  19.  text-overflow: ellipsis;
  20. }

Here’s the result.

Complete Guide CSS Overflow Article Image 10

Browser Compatibility

Complete Guide CSS Overflow Article Image 11

The CSS overflow property is supported across all major browsers.

Complete Guide CSS Overflow Article Image

IMAGE: UNSPLASH (HEADER IMAGE: UNSPLASH)

If you are interested in even more technology-related articles and information from us here at Bit Rebels, then we have a lot to choose from.

COMMENTS

WORDPRESS: 0