Overflow — Content layout fundamentals

Content in a block overflowing is a common occurrence in content layout. Overflow is when the content within a container is larger than the size of the container itself. This is often seen when using a container with fixed height and width values.

Interestingly, using fixed height and width values is not good practice in most cases. So, you can quickly create a block in the layout design, but it also takes away the opportunity to expand functionality. Any departure from the original content can lead to problems with content leaving the container. Only use fixed heights and widths when they're intended in the design or to create specific functionality.

As an example, let's create a block with fixed height and width values. Within this container, place the text so that it extends beyond the boundaries of the block.

<section>
  <h1>Profession: HTML/CSS Developer</h1>
  <p>Creates pages using HTML and CSS. Can take full advantage of the Flex and Grid modules. Uses the SASS preprocessor and the Pug template engine, and builds projects using Gulp. Makes sure the site is accessible by creating semantically correct markup. Creates components and utilities on Bootstrap. Typesets adaptive layouts.</p>
</section>

section {
  box-sizing: border-box;

  width: 500px;
  height: 300px;
  padding: 20px;

  color: #fff;
  font: 22px/1.5 sans-serif;

  background: #1d3e53;
}

h1 {
  font-size: 2em;
}

A lot of the description of this profession left the boundaries of the block In this case, browsers consider the content more important than its container and doesn't hide the text. It makes sense because the main part of any page is its content. Without it, the whole page would be meaningless.

This situation is called an overflow, and CSS allows you to manage it. There are three properties for this:

1. overflow-x — horizontal overflow control
2. overflow-y — vertical overflow control
3. overflow is an abbreviated notation of the previous two properties. If you specify only one value inside, it'll be applied to both axes at the same time. The most common use case

By default, the property has the visible value, which indicates that the content should be rendered outside its parent when it overflows. Besides visible, there's also the hidden value. Its job is the opposite; it hides content that goes beyond its parent. In this case, there'll be no way to access the content. When using the overflow property, it's important to remember that this property is not inherited, so it needs to be specified in each block where the overflow occurs. You'll see more examples of such implementations in the future.

A common situation when rendering blocks that should be in HTML, but be temporarily hidden. For example, when creating sliders in which all inactive slides are outside the block and hidden using the overflow property.

At least now, the layout hasn't been broken by the overflow, but it's still impossible to read the description of the profession. What's missing is some kind of scroll bar inside the block. The overflow property allows you to add a scrollbar to this block. Two values can be used for this:

• scroll
• auto

What's the difference between them? Let's look at an example using the scroll value. Let's set this new value of the overflow property for the section.

Now we can scroll through the content inside the block and finally read the description of the whole profession. However, this gave us both horizontal and vertical scrolling. It's unavailable though because there is no content overflow in this direction. Firstly, it spoils the design, and secondly, it takes space inside the block. If this behavior is not explicitly indicated in the layout, it's worth adding a scroll bar only for the direction where content overflow occurs. This is possible using the auto value. In this case, the browser keeps track of where the overflow occurred and adds a scroll bar just for that direction.

Note: use the overflow property with caution. It can be very tempting to use it when making quick markup and to prevent horizontal overflow using code like this:

body {
  overflow-x: hidden;
}

This will solve the horizontal scrolling problem, but it may also cut off an important piece of content. Take the time to localize the problem and solve it. This will make your layout clearer and easier to understand.

Text overflow

You don't always need to use the overflow property to work with overflows. There are some situations where you need to work on the content overflow itself rather than editing the whole block. As an example, we'll use the layout of a chat message preview.

Study the layout of this example before continuing. You may find a couple of new properties that apply to the CSS Flexible Box Layout module. You will learn about this module in the CSS: Flex course.

The preview looks good with the amount of text we have now, but if there's more, then the whole layout could fall apart.

Interestingly, one of the tasks of a good layout designer is to provide different content options within a block. Try putting long sequences in the fields where a name is expected.

Increase the amount of content inside the message preview component.

It doesn't really look like a preview now. Now it is a full-fledged message displayed to the user. If there are a dozen or a hundred such messages, it's very easy to just not bother and leave the site than it is to leaf through all that content. Ideally, only one line from the name and one line from the message should be displayed. This can be done by using the white-space property with the nowrap value. This structure will prevent text from being moved along the lines within a block. If you add it, all the text inside the name block and the message block will be on one line, which will cause an overflow but will also solve the problem. After all, we already know how to work with overflows. Set this property for the .contact-name and .contact-message selectors.

.contact-name {
  font-weight: 700;
  white-space: nowrap;
}

.contact-message {
  margin: 0;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
}

It didn't turn out so well. It's worth trimming content that doesn't fit into the container frame. Let's add the overflow-x property to the selectors that the white-space rule has been added to. The property must also be added to the entire container, which contains the elements with the name and message

.contact-body {
  padding: 1.5rem;
  overflow-x: hidden;
}

.contact-name {
  overflow-x: hidden;

  font-weight: 700;
  white-space: nowrap;
}

.contact-message {
  margin: 0;
  overflow-x: hidden;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
}

Why did we need so many overflow properties? It's to do with how the HTML is displayed. At its core, the browser simply reads the layout from top to bottom. If you look at this component from the browser's point of view, you get the following situation:

1. Render the .contact-body block and limit its width.
2. Render the .contact-name block. It contains a lot of content that isn't allowed to be moved due to the white-space rule. The block is wider than its parent. By default, we draw the content outside the container
3. Repeat step 2 for the .contact-message block

By adding an overflow property to each of the three blocks, the browser will consistently handle the content overflow. If you omit the .contact-body block property, the width of the .contact-name and .contact-message blocks will not be limited, and using overflow will not affect them in any way.

You might say that the layout is complete, but now there's no spacing between two separate pieces of text on the same line. For example, the username and the time of the message almost stick together. You can add indentation, but there's another way to deal with content overflow within a line.

The text-overflow rule is used to tell the browser what to do when content overflows within a string. It can take just two values:

• clip is the default value. The text is truncated when it reaches the block boundary. This is the behavior seen in the example above
• ellipsis - an ellipsis is added instead of simply cutting off the end. This visually indicates to the user that the line is incomplete. Let's add an ellipsis to the blocks with the user name and message text

Let's add an ellipsis to the blocks with the user name and message text.

Note: in order for the text-overflow property to work, you must have an overflow property with a value other than visible.

.contact-name {
  padding-right: 10px; /* add right padding for sake of appearance */
  overflow-x: hidden;

  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contact-message {
  margin: 0;
  overflow-x: hidden;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Do it yourself

Create a block that shows a preview of some news using these new properties. It'll have three 500-pixel wide columns. The block will contain the following data:

• Date
• News headline
• Short Description

The date and name of the news should be displayed in full, with line breaks if necessary. The short description should be displayed in one line. If there isn't enough space, an ellipsis should be placed at the end of the description.

Recommended materials

1. Spec on CSS Overflow Module Level 3