Whether you’re creating layouts from scratch or customizing pre-designed ones, you’ll likely run into some alignment issues.

Say, for example, you have a hero image at the top of your homepage. Below that you have a few div elements that contain text. Maybe it looks something like SEO WP’s homepage demo below.

SEOWP Theme demo without text overflow

Image Source

Now imagine that one of those three paragraphs under the headings had multiple sentences instead of one. That would make the text too big to fit within its specified area, and potentially cause it to overlap with other elements on the page. This is known as overflow in CSS.

Free Intro Guide to HTML & CSS [Download Now]

Before we take a closer look at the overflow property, let’s clarify what we meant by the “element’s box.” According to the CSS box model, a rectangular box is generated for HTML elements. This box is made up of four layers: the content itself, padding, a border, and a margin, as illustrated below.

CSS box model illustration of four layers including content, padding, border, and margin

Image Source

When the content of an HTML element extends beyond any of the box’s edges — whether that’s the content edge, padding edge, border edge, or margin edge — it is called overflow.

CSS Overflow Property

The CSS overflow property provides a few options for controlling overflow. You can let the content render outside the element’s box, clip the content, or clip the content and add a scrollbar. To do so, you need to use the following property values. Let’s take a closer look.

CSS Overflow Visible

Visible means that the overflow will not be clipped. Instead, it will render outside the element’s box and potentially overlap with other elements on the page.

By default, the CSS overflow property is set to visible. Meaning, you don’t need to set the CSS overflow property to “visible” unless you’re overriding CSS in an external stylesheet or somewhere else on your site.

Let’s look at an example.

Here’s the CSS:

 
#example1 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  height: 170px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

  overflow: visible;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

}

Here’s the HTML:

 
<h2>CSS Overflow Visible</h2>

<p>Overflow:visible means that the overflow will render outside the element’s box and potentially overlap with other elements on the page, as shown below. Since the CSS overflow property is set to visible by default, you don't have to define it in your CSS. I did just for the sake of this demo.</p>

<div id="example1">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. This is more dummy text. This is more dummy text. This is more dummy text.

</div>

<div id="example2">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.

</div>

Here’s the result:

CSS overflow visible example with text from one div overlapping with another

Image Source

CSS Overflow Hidden

To hide overflow from rendering outside the element’s box, you can set the overflow property to “hidden.” This will clip the content at the box’s padding edge and not allow the user to view the content beyond that edge by scrolling or dragging their finger on a touch screen or any other means.

However, this value still allows programmatic scrolling, which means the box is technically a scroll container. A user could use the mechanisms defined by the CSSOM View Module, for example, to see the hidden content.

Let’s look at an example:

Here’s the CSS:

 
#example1 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  height: 170px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

  overflow: hidden;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

}

Here’s the HTML:

 
<h2>CSS Overflow Hidden</h2>

<p>Overflow:hidden means that the overflow will not render outside the element’s box. Instead, it will be clipped at the box's padding edge. This value differs from "clip" in that it still allows programmatic scrolling, which means the box is technically a scroll container.</p>

<div id="example1">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. This is more dummy text. This is more dummy text. This is more dummy text.

</div>

<div id="example2">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.

</div>

Here’s the result:

CSS overflow hidden example with text from one div clipped at padding edge

Image Source

CSS Overflow Scroll

If you’d like to hide overflow from rendering outside the element’s box but enable users to view that content, you can set the overflow property to “scroll.” The overflow will still be clipped at the box’s padding edge. However, a scrollbar or paneer will be added so that users can scroll to see the content that’s not visible.

Here’s an example.

Here’s the CSS:

 
#example1 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  height: 170px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

  overflow: scroll;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

}

Here’s the HTML:

 
<h2>CSS Overflow Scroll</h2>

<p>Overflow:scroll means that the overflow will be clipped at the box's padding edge, but a scrolling mechanism will be added so that users will be able to scroll to see the content that isn't visible. In the example below, a scrollbar is added. </p>

<div id="example1">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. This is more dummy text. This is more dummy text. This is more dummy text.

</div>

<div id="example2">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.

</div>

Here’s the result:

Overflow scroll example shows one div with vertical scrollbar

Image Source

CSS Overflow Auto

The “auto” value is similar to scroll — but only adds a scrollbar when the box has overflow.

In the example below, both divs are defined with overflow:auto. Only one has scrollable overflow and a scrollbar, however. The other does not.

Here’s the CSS:

 
#example1 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  height: 170px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

  overflow: auto;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 300px;

  padding: 30px;

  border: 1px solid #000000;

  margin: 10px;

  overflow: auto;

}

Here’s the HTML:

 
<h2>CSS Overflow Auto</h2>

<p>Overflow:auto means that the overflow will be clipped at the box's padding edge and a scroll bar will be added if necessary. Meaning, the box has scrollable overflow. In the example below, the first div has overflow and therefore a scrollbar and the second div does not. </p>

<div id="example1">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. This is more dummy text. This is more dummy text. This is more dummy text.

</div>

<div id="example2">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.

</div>

Here’s the result:

Overflow property auto example with one div with a scrollbar and one without

Image Source

In the examples above, we used the shorthand overflow property. This is shorthand for the overflow-x and overflow-y properties. Let’s take a closer look at these two longhand properties below.

CSS Overflow-x

The overflow-x property is used to control horizontal overflow, or overflow from the left and right of an element’s box.

Let’s look at an example below.

Here’s the CSS:

 
#example1 {

  width: 400px;

  height: 200px;

  overflow-x: scroll;

  overflow-y: hidden;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 400px;

  padding: 30px;

  border: 1px solid #000000;

}

Here’s the HTML:

 
<h2>CSS Overflow-x and Overflow-y Properties</h2>

<p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I 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>

<div id="example1">

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

<div id="example2">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.

</div>
Here’s the result:

Overflow-x and overflow-y properties set to scroll and hidden respectively so image can be scrolled horizontally but not vertically

Image Source

CSS Overflow-y

The overflow-y property is used to control vertical overflow, or overflow from the top and bottom of an element’s box.

Let’s reverse the values from the example above.

Here’s the CSS:

 
#example1 {

  width: 400px;

  height: 200px;

  overflow-x: hidden;

  overflow-y: scroll;

}

#example2 {

  background-color: #EEEEEE;

  box-sizing: border-box;

  width: 400px;

  padding: 30px;

  border: 1px solid #000000;

}

Here’s the HTML:

 
<h2>CSS Overflow-x and Overflow-y Properties</h2>

<p>Instead of using the shorthand overflow property, I can use the overflow-x and overflow-y properties to control the overflow horizontally and vertically. In this example, I set overflow-x to hidden so I can't scroll up and down. But I set the overflow-y to scroll so I can scroll up and down to view the image.</p>

<div id="example1">

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

<div id="example2">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.

</div>

Here’s the result:

Overflow-x and overflow-y properties set to hidden and scroll respectively so image can be scrolled vertically but not horizontally

Image Source

You can use the shorthand overflow property instead of defining both the overflow-x and overflow-y properties. If two values are specified, the first represents the value of overflow-x and the second for overflow-y. If there is only one value, it applies to both the overflow-x and overflow-y properties. For example, if I defined the div containing the image with overflow:scroll; then the image could be scrolled horizontally and vertically.

CSS Overflow Wrap

The CSS overflow-wrap property is used to specify the circumstances in which the browser can break a line of text onto multiple lines. Without this property, a string of text that is too long to fit within the line box would be unbreakable and cause overflow.

To use the overflow-wrap property, the white-space property must allow wrapping. That means the white-space property can be set to “normal,” “pre-wrap,” and “break-spaces,” or “pre-line.” Most often you’ll see it set to “normal.”

There are three possible values for defining the overflow-wrap property. They are briefly defined below.

  • Normal: Lines only break at unforced break points, like the space between two words.
  • Anywhere: Lines may break at forced break points if there are no unforced ones. For example, a long word or URL may be broken to wrap on another line. No hyphen is inserted at the break point. With this value, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are considered when calculating min-content intrinsic sizes, or the smallest size a box could take without causing overflow.
  • Break-word: Lines may break at forced break points if there are no unforced ones. No hyphen is inserted at the break point. With this value however, opportunities to minimize the amount of content overflowing a line by wrapping the line at breakpoint are not considered when calculating min-content intrinsic sizes, or the smallest size a box could take without causing overflow.

Let’s look at an example showing each of these values below.

Here’s the CSS:

 
.wrap {

   width: 200px;

   margin: 5px;

   background: #AACC88;

}

#example1 {

  white-space: normal;

  overflow-wrap: normal;

}

#example2 {

  white-space: normal;

  overflow-wrap: anywhere;

}

#example3 {

  white-space: normal;

  overflow-wrap: break-word;

}

Here’s the HTML:

 
<h2>CSS Overflow Wrap</h2>

<p>The CSS overflow-wrap property is used to specify the circumstances in which the browser can break a line of text that's too long to fit within the line box onto multiple lines to prevent overflow. You can either define the property with "normal" so that lines only break at unforced break points, like the space between two words, or with the values "anywhere" or "break-word" so that lines can break anywhere to prevent overflow.</p>

<p class="wrap">This is dummy text. <strong id="example1">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.

</p>

<p class="wrap">This is dummy text. <strong id="example2">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.

</p>

<p class="wrap">This is dummy text. <strong id="example3">Thisismoremoremoredummytext. This is.</strong> This is more dummy text. This is more dummy text.

</p>

Here’s the result:

CSS overflow wrap property defined with normal, anywhere, and break-word values

Image Source

CSS Text Overflow

The CSS text overflow property is used to control how inline content that overflows its block container element is rendered on the page.

To use the CSS text overflow property, the block container element must be defined by the overflow property with a value other than “visible.” Most often, it will be defined by “overflow: hidden.” Also, it must be defined by the white-space property and set to “nowrap.” Otherwise, the inline content will wrap to the next line, instead of clipping.

There are two CSS text overflow property values. Let’s take a look at them below.

CSS Overflow Clip

Setting the CSS text overflow property to “clip” will cut the inline content that overflows its block container element at the padding edge. Visitors will therefore not be able to see content beyond the edge where it’s clipped.

This is nearly identical to the “hidden” value for the CSS overflow property. The difference is that clip forbids scrolling of any kind, including programmatic scrolling. That means the element’s box is not a scroll container.

Let’s look at an example below.

Here’s the CSS:

 
div {

  overflow: hidden;

  white-space: nowrap;

  width: 400px;

  text-overflow: clip;

  border: 1px solid #AAAAAA;

}

Here’s the HTML:

 
<h2>CSS Text Overflow Clip</h2>

<p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap." That means you can apply the text-overflow property to the div. By setting it to "clip," the text contained inside the div will be clipped at the div's padding edge. Only the first line of the paragraph will show.</p>  

<div>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. This is more dummy text. This is more dummy text. This is more dummy text.</div>

Here’s the result:

CSS text overflow clip example

Image Source

CSS Overflow Ellipsis

You have the option of setting the CSS text overflow property to “ellipsis”as will. This will cut the inline content that overflows its block container element at the padding edge — and a little extra to fit the ellipsis. This value also forbids any scrolling, including programmatic scrolling, which tells the browser that the element’s box is not a scroll container. Visitors will therefore not be able to see content beyond the edge where it’s clipped.

Here’s an example.

Here’s the CSS:

 
div {

  overflow: hidden;

  white-space: nowrap;

  width: 600px;

  text-overflow: ellipsis;

  border: 1px solid #AAAAAA;

}

Here’s the HTML:

 
<h2>CSS Text Overflow Ellipsis</h2>

<p>The div below is defined by the overflow property and set to "hidden" and the white-space property set to "nowrap." That means you can apply the text-overflow property to the div. By setting it to "ellipsis," the text contained inside the div will be clipped at the div's padding edge. Some of the characters will also be replaced by the ellipsis character.</p>  

<div>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. This is more dummy text. This is more dummy text. This is more dummy text.</div>

Here’s the result:

CSS text overflow ellipsis example

Image Source

Controlling Overflow in Your Layouts

Overflow is a common issue that you’ll likely run into either creating layouts from scratch or customizing pre-designed ones. Understanding how to control it will ensure you can create and customize your layouts without compromising on alignment or positioning. Thankfully, you only need some basic web design knowledge to do so.

New Call-to-action

 css introduction

Originally published Nov 20, 2020 7:00:00 AM, updated November 20 2020

Topics:

Bootstrap & CSS