Using CSS Overflow to Deal with Text or Images That Exceed the Fixed Width or Height of a Section

Using CSS Overflow to Deal with Text or Images That Exceed the Fixed Width or Height of a Section
Page content

The CSS Overflow Attribute

If a CSS element has a fixed width and height, then the overflow attribute controls what happens when the content inside the box exceeds the dimensions of the CSS element.

If the following element:

contains the following image:

this image is bigger than the element that contains it

then the entire image is displayed by default. The default state is equivalent to using the CSS overflow attribute with its default visible attribute:

On the other hand, if the CSS overflow attribute is set to hidden, then the image is curtailed to the dimensions of the

element.

If the CSS overflow attribute is set to scroll, then the image is curtailed to the dimensions of the

element, but a scroll-bar is added to allow scrolling to reveal the rest of the content. The scroll bar will appear whether the content is too large or not.

One of the most useful values for the CSS overflow attribute is auto. In this case, the image is curtailed to the dimensions of the

element, but a scroll-bar is added to allow scrolling to reveal the rest of the content, but only in those cases where the content exceeds the dimensions. Further, it will appear only for one dimension if only one dimension exceeds the dimension of the containing element.

Finally, the value can be set to inherit, but this value is not supported by any version of Internet Explorer, so will not be considered further here.

Applications of the CSS Overflow Attribute

The Scrolling Gallery

In a recent article I showed how you could use the CSS overflow attribute to construct a scrolling gallery wall to display pictures. For more details, or to see it in action, visit https://www.gallery299.co.uk for an example of a working application of this type.

Replacing the Read more message on your blog

Many content management systems or blogging sites lead to a series of items with a Read more link at the bottom of the item. The reader has to click on the link and is taken to a new page to read the full article. An alternative strategy is to set the CSS for the item to overflow auto, this allows the content to be accessed by scrolling down, and crucially does not take the reader away from the main page, which may encourage the reader to stay on your site and access more content.

Accommodating dynamic content

One of the ways of getting dynamic content to an otherwise static site is to use a script to turn RSS syndicated content into html. See https://www.RSS2html.com/ for an example script or search RSS 2 html in your favourite search engine to find others. One of the challenges is that the length of an article retrieved by such a script can be highly variable. In order to accommodate the generated text within a fixed HTML layout, use of the overflow:auto attribute is almost essential.