Friday - Text Overflow

Today we're going to add another layout management option; yesterday we used the position property and today we're going to use the overflow property. If you have an element whose content swells the box that contains it and distorts your page, you can add a scrollbar to that element and have only part of that content visible at a time so that the rest of your layout can appear the way you want it to appear.

To do that, in CSS go to the declaration that selects the HTML element with too much content and add {overflow: scroll;} to it. In addition to setting it to scroll, you can also set the overflowing content to hide or you can set it dynamically to add a scrollbar only if needed. I will demonstrate on the big screen. Understand that there will be a future coding challenge on which you will have to manage overflow, so you would do well to include this code in your main.css today so you have it when you need it.

As usual, there is a good W3Schools tutorial on overflow that you should use to supplement my demonstration.